Animate Blocks toolkit Extension
Free · private · in your browser

Animate on scroll. No library.

Pick an effect, tune it, scroll the live preview, then copy clean CSS and a tiny IntersectionObserver script. Reduced-motion support is built in.

Effect
Live preview: scroll this box
First blockScrolls into view
Second blockAnimates when visible
Third blockKeep scrolling
Fourth blockReduced motion shows it instantly

          

          

            

          

          

            

          

          

            

          

        

      

      

        
            
          Runs in your browser, nothing is uploaded
        
            
          Free, no sign-up
        
            
          No cookies, no tracking
      

    


    

      

        
          
              
            
          
Easing editor

          
Drag a curve or generate a spring.

          Open tool →
        
        
          
              
            
          
Effects library

          
20 effects to preview and copy.

          Open tool →
        
      

    


    

      
Quick answer: To animate an element as it scrolls into view, define a CSS @keyframes animation, hide the element until it is visible, and use an IntersectionObserver to add a class when it enters the viewport. Pick an effect above and this tool generates the CSS, JavaScript and HTML, including prefers-reduced-motion support.

      
How animate on scroll works

      
Three pieces work together: a @keyframes rule describing the motion, a CSS class that hides the element until it is revealed, and a small script using IntersectionObserver that adds an is-visible class when the element enters the viewport. The browser then plays the animation once (or every time, if you choose Repeat).

      
Make it accessible

      
Some visitors get motion sickness or distraction from animation and set reduce motion in their operating system. The generated CSS and JavaScript both check prefers-reduced-motion and show the content immediately instead.

      
Keep it fast

      
      
    
        
  1. Pick an effect. Choose from 20 fade, slide, zoom, flip, rotate, blur and bounce effects.
    2. 
        
  2. Tune the timing. Set duration, delay, easing, distance and how much of the element must be visible.
    3. 
        
  3. Scroll the preview. Scroll the demo box to see the effect, and press Replay to run it again.
    4. 
        
  4. Copy the code. Paste the CSS into your stylesheet, the JavaScript into your page and add the class to your elements.
    5. 
      

      
Frequently asked questions

      

        

          Do I need a library like AOS?
          
No. IntersectionObserver is supported in every modern browser, so a few lines of JavaScript and some CSS are enough. The generated code has no dependencies.

        

        

          How does it handle prefers-reduced-motion?
          
The CSS shows elements immediately and disables the animation, and the script adds the visible class straight away, when the visitor has asked for reduced motion.

        

        

          Why does the CSS use visibility: hidden?
          
It keeps the element hidden until its animation starts. The rule is scoped to a js class, so if JavaScript fails, content is still visible.

        

        

          Can the animation repeat each time I scroll?
          
Yes. Untick Animate once and the script removes the class when the element leaves the viewport so it can play again.

        

        

          Is there a WordPress version?
          
Animate on Scroll by Developry adds these effects to any block in the WordPress editor and loads only the effects each page uses.

        

      

    

    

      

        
Get the free browser extension
Scroll Animation Inspector for Chrome, Edge and Opera.

        See the extension →