★ Scroll Animations

A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view.

Check out this Pen!

Note that the event handler is not debounced as we need to actually trigger the animations on actual scroll. Is partially optimised by removing the event handler once all elements are visible. Could be further optimised by throttling the event handler.

CSS animations are borrowed from http://glifo.uiparade.com/. Integration with animate.css of course also possible.

Did this help you out? Like what you see? Consider donating.

☕️ Buy me a Coffee ($3)

It certainly is no obligation but it would put a smile on my face. Thanks! 🙂

UPDATE June 2016: For a project I’m building I need the animations to reverse when scrolling up. And so I build’eth.

Check out this Pen!

Elsewhere , , ,

9 Responses to ★ Scroll Animations

  1. 2 ‘easy’ optimisations I would suggest checking:

    * don’t calculate offset and height in your event handler, cache it before your scroll loop runs.
    * use requestAnimationFrame for scroll / resize events

  2. Pingback: Skrollr – CSS animations linked to scroll position | Bram.us

  3. Pingback: AOS – Animate on Scroll | Bram.us

  4. Alex says:

    It seems that this only works with an earlier version of jQuery (1.10.1).
    Is there any update for more recent versions of jQuery?

    • mike says:

      It doesnt work at all. It just get triggered on loading and not on scroll or visible.
      Any suggestions? ^^

    • Bramus! says:

      The code examples have been updated to use the latest jQuery version (3.3.1 at the time of writing). Problem was that the size() method no longer existed, and got replaced with the .length property.

  5. Pingback: Delighters.JS – Add CSS animations to delight users as they scroll down | Bram.us

  6. Nate says:

    It doesn’t work with the most recent version of jQuery because .size() is deprecated.
    Just replace
    ($animatables.size() == 0)
    with
    ($animatables.length == 0)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.