Trigger animation
Now, by clicking on one element, you can launch an animation of another element inside the block.
To test animation, open the page on screens larger than 1200px.
CLICK ME!
Trigger animation
Now, by clicking on one element, you can launch an animation of another element inside the block.
HOVER OVER!
The Supreme official online store
The Music Daily app design and promotion
Me and Aviro synergy for The Daily Mail
City Cycling web and mobile App
The Darrial website concept
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
1
Hover over any title
- Trigger — Title
- Event — Hover
- Images — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Event — Hover
- Images — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Image appears when hovering over text
Commercial work
Portrait and Fashion photography
Event photography
Choose any project, hover over any title
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
2
Hover over any title
- Trigger — Title
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Image appears when hovering over text
Say hello in six popular languages
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
Hover over any language icon
English
French
Deutch
Spanish
Italian
Chinese
3
- Trigger — Language title
- Images — Pointer Events-None
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Scale 250; Opacity 100
- Images — Pointer Events-None
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Scale 250; Opacity 100
Image with a translation appears on text hover
PHOTOGRAPHY
Photography examples
A good online portfolio needs more than images. Follow our top tips to on using words and photographs that tell a story.
ILLUSTRATION
Commercial and personal illustration
We work with clients in spheres ranging from advertising and brands to fashion and retail and more.
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
4
Hover over any card
- Trigger — Image
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100, Move Y -50
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100, Move Y -50
White background, title and text appear when hovering over an image
NEW POWER IN ANIMATION
5
Hover over the text below
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
- Trigger — Text copy
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Text is highlighted. Yellow boxes appear on the page. A shape shows under the text.
Chemex
The Chemex Coffeemaker is a manual pour-over style glass coffeemaker, invented by Peter Schlumbohm in 1941, manufactured by the Chemex Corporation in Chicopee, Massachusetts. In 1958, designers at the Illinois Institute of Technology said that the Chemex Coffeemaker is "one of the best-designed products of modern times" and it is included in the collection of the Museum of Modern Art in New York City.
Point and hover over the word Chemex in the title
6
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
- Trigger — Text copy
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
White card with text appears when clicking on the title
- Trigger — Text copy
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Underline under the headline appears on the page
7
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
Click on A WAVE
- Trigger — Title
- Event — Click
- Step 1 — Duration 0.1; Move Y -100px
- Step 2 — Duration 0.1; Move Y - 0
Starting from the second form Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
- Event — Click
- Step 1 — Duration 0.1; Move Y -100px
- Step 2 — Duration 0.1; Move Y - 0
Starting from the second form Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Image appears when hovering over text
Berlin streets
8
Berlin is the capital and largest city of Germany by both area and population. Its 3,748,148 (2018) inhabitants make it the second most populous city proper of the European Union after London. The city is one of Germany's 16 federal states. It is surrounded by the state of Brandenburg, and contiguous with Potsdam, Brandenburg's capital. The two cities are at the center of the Berlin-Brandenburg capital region, which is, with about six million inhabitants and an area of more than 30,000 km² Germany's third-largest metropolitan region after the Rhine-Ruhr and Rhine-Main regions.
The Brandenburg Gate is an 18th-century neoclassical monument in Berlin, built on the orders of Prussian king Frederick William II after the successful restoration of order during the Batavian Revolution.
Sweet dough dumplings, fried in fat or oil, filled with jam and glazed with confectioner's sugar. Also known simply as "Berliner" or, in the eastern part of Germanyand in Bavaria, they are called "Krapfen".
German is the official and predominant spoken language in Berlin. It is a West Germanic language that derives most of its vocabulary from the Germanic branch of the Indo-European language family.
Click on the title
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
- Trigger — Title and description
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.2; Move Y -417; Opacity 100
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.2; Move Y -417; Opacity 100
Card appears when clicking on text
- Trigger — Title and description
- Event — Click
- Step 2 — Duration 0.2; Move Y -145; Opacity 0
- Event — Click
- Step 2 — Duration 0.2; Move Y -145; Opacity 0
Description disappears when clicking on it and the title
LET'S GO!
Replace elements on click or on hover
Hover over any button
HOVER ON
PLAY
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
9
- Trigger — Button 2 (top layer)
- Top Image — Pointer events-None
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
- Top Image — Pointer events-None
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Replacing one element with another
Create a page content guide
Hover over any section to find out more
10
TREES
GROUND
BIRDS
INSECTS
Insects or Insecta are hexapod invertebrates and the largest group within the arthropod phylum. Definitions and circumscriptions vary; usually, insects comprise a class within the Arthropoda.
Some birds, especially corvids and parrots, are among the most intelligent animals; several bird species make and use tools, and many social species pass on knowledge across generations, which is considered a form of culture.
The pedosphere interfaces with the lithosphere, the hydrosphere, the atmosphere, and the biosphere. The term pedolith, used commonly to refer to the soil, translates to ground stone in the sense "fundamental stone".
In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower
WATER
Water is an inorganic, transparent, tasteless, odorless, and nearly colorless chemical substance, which is the main constituent of Earth's hydrosphere, and the fluids of most living organisms.
GET STARTED
WITH YOUR
ANIMATION
WITH YOUR
ANIMATION
- Trigger — Title
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100
- Event — Hover
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100
Image appears when hovering over the title
- Trigger — Title
- Event — Hover
- Texts and catds — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100; Move - 250
- Event — Hover
- Texts and catds — Pointer Events-None
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.3; Opacity 100; Move - 250
Card with text appears when hovering over the title
Example of trigger animation effect when hovering over elements
Example of trigger animation effect when clicking on elements
CLICK HERE
IT WORKS!
How trigger animation works
Add a circle and a button in Zero Block. Select the circle and open the Step-by-step animation settings.
As an EVENT, select On Click or On Hover.
Click on Add Trigger in the settings, then on the CLICK HERE button. You've selected the button as an animation trigger.
Step-by-step add animation. We moved the yellow circle 600px to the right on button click.
The trigger animation effect works on click or on hover
You can assign several animations to one trigger
You can assign several triggers for one animation
Let's study a simple example
