Welcome to the wine cellar
12
hectares of vines
Every bunch is picked by hand.
Animate your pages on hover and on scroll
Give your blocks an effect and choose when it plays: when they come on screen, on hover, on click or while scrolling. A visitor who is bothered by motion sees the same page, still.
Over 30 effects ready to use
No script to add
Over 450 animated icons
Your visitors’ “reduce motion” setting respected
Make a number, a word or a sentence stand out
A line takes the color of your text, and the highlight a color from your brand palette. Scroll back up and these examples play again.
250
orders
Counter
The number counts up from zero when the visitor reaches it.
Delivered within 48 h
Underline
A line draws itself under the word, as if with a pen.
Your quote is free
Circle
A hand-drawn line circles the word.
Open on Sundays
Highlight
The word gets a highlighter.
Hello, what are you looking for?
Typed text
The sentence writes itself letter by letter, as if typed or handwritten.
For tradespeople, shopkeepers, agencies
Rotating words
The words replace one another and the last one stays.
Bring in your sections at the right moment
Choose each block’s effect. Cards can arrive one after another.
Fade in
The card fades in.
Slide
The card rises into place or comes in from one side.
Zoom in
The card grows to its full size.
Expand
The card opens out from its middle.
Make your cards, buttons and icons react on hover
Move your mouse over these examples.
3D tilt
The card tilts towards the mouse.
Magnetic
The button moves towards the mouse when it passes close by.
Push neighbors aside
The cards move away from the one the mouse is over.
Mon
Tue
Wed
Thu
Icons that move on hover
They move on hover with no setup. They can move when they come on screen or on click.
Bell
Envelope
Send
Rocket
Heart
Pin
Tell your story while the visitor scrolls
This sentence reveals itself word by word as you scroll down the page and fades away when you scroll back up.
An animation can move forward with scrolling instead of playing on its own. An image slides more slowly than the page and a background closes in on its text.
A video of your product can move forward with scrolling, and your selling points arrive when the image shows them.
Chain your animations from one block to the next
An animation starts with the previous one or after it. When it ends, it can start another one on another block. A click on a button can make a section appear.
This sentence appears when the line is finished.
Your visitors stay in control of animations
Try the motion switcher: choose Reduced and the page goes still.
Choosing an option reloads the page.
Their device setting is respected
A visitor who has asked their phone or computer for less motion sees the page without animation. Text and numbers stay on display.
Your visitors turn off animations in one click
Place the motion switcher in your footer. The visitor’s choice applies to every page.
Screen readers read your animated text in full
A sentence that types itself is announced all at once and a counter is read with its real number.
Do animations make my pages heavier?
No, you add nothing to load. Your analytics measure the speed of each page for your visitors.
Will a visitor who gets motion sickness be able to read my page?
Yes. Their pages stay still from start to finish of their visit, whether they asked their device for it or chose it in your motion switcher.
Do my animations work on a phone?
Yes, except the ones that play when the mouse hovers. Keep those for things that make sense without them.
How many animations should I put on a page?
Fewer than you think. An animation that serves no purpose gets noticed more than it helps. Keep one movement per block and save the visible effects for what you want people to notice.
Can I reuse an animation I found on another site?
Yes, if it is written in CSS. Paste it into the block and it joins your animations.
Does Google read my animated text?
Yes. The text is in the page as soon as it loads, the animation only reveals it. A counter holds its real number.
Can my AI animate my pages?
Yes, once it is connected to your site. It adds the same effects you do on your site in Staging, and you publish.