# Animations # 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 Request my site Welcome to the wine cellar — 12 — hectares of vines — Every bunch is picked by hand. ## 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. [video](https://static.lovelyrender.com/uploads/2026/10/1422-bg-waves-lavender-light.webm) ## 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. Request my site - ### 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. Harvest at the end of September — 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. ### 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. ## Frequently asked questions *### 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. ## Animate your pages with our guides - ### [Animate a block](https://lovelyrender.com/documentation/animate-block/) - ### [Animate on scroll](https://lovelyrender.com/documentation/animate-on-scroll/) - ### [Appearance and motion switchers](https://lovelyrender.com/documentation/appearance-motion-switchers/) ## Every plan includes all the animations Plans differ only in traffic and storage. Request my site [See pricing](https://lovelyrender.com/pricing/)