39

Show DN: I made a CSS3 scroll position based animation library

7 years ago from , Full stack developer.

Hi!

I was looking for a small library to trigger animations based on the users scroll position, e.g. for animating in blocks when they are in the viewport. But every library out there was either to big or complex, or 'jacked' the users scroll, so i wrote one.

It's based on requestAnimationFrame so the animations get triggered when the browser is ready for it, and not when the user scrolls. That way the user/browser keeps their original scroll behaviour.

It triggers CSS classes so the animation possibilities are (almost) endless. And you can write animations in the language that you are used to.

Demo: https://terwanerik.github.io/ScrollTrigger

Source: https://github.com/terwanerik/ScrollTrigger

Let me know what you think!

Cheers,

Erik

27 comments

  • Julian LengfelderJulian Lengfelder, 7 years ago

    Nicely done! Will be using this in combination with rellax.js.

    1 point
    • Moe AmayaMoe Amaya, 7 years ago

      Appreciate the rellax shoutout (I'm the developer)!

      Erik's code is a bit more performant than mine. He's using requestAnimationFrame which I'm going to borrow for the next release.

      Nice work Erik, code is concise and legible. I like the idea of triggering animations just once, created an issue.

      4 points
  • Sean O'GradySean O'Grady, 7 years ago

    Nothing else to say but awesome job & I will be using this :)

    1 point
  • Dan WilkinsonDan Wilkinson, 7 years ago

    Nice work, just what I've been looking for :-)

    1 point
  • Surjith S MSurjith S M, 7 years ago

    I'm seeing few blank sections in Firefox Latest, Win 8.1 :(

    0 points
    • Erik TerwanErik Terwan, 7 years ago

      Yes this is fixed now! A bug that slipped in with v0.2; FF & IE do not have the scrollTop property on the body, but on the html element..

      0 points
  • Jay KerrJay Kerr, 7 years ago

    This is great. Thank you!

    0 points
  • David BachmannDavid Bachmann, 7 years ago

    Nice job. Bookmarked for future use.

    0 points
  • Brynn HawkerBrynn Hawker, 7 years ago

    This is awesome! I was just thinking about this the other day.

    0 points
  • Oscar WaczynskiOscar Waczynski, 7 years ago

    Even though you mention that it's dropped for mobile, it does seem to work as it does on the desktop when I'm on my iPhone with iOS 9.3.2 in Safari.

    This might work out nicely for my portfolio project. Thanks for sharing!

    0 points
    • Erik TerwanErik Terwan, 7 years ago (edited 7 years ago )

      The script works on mobile, the demo just is not optimised for mobile devices!

      Edit: it's optimised now and working pretty sweet

      0 points
  • Simon FSimon F, 7 years ago

    Have you looked at wow.js? https://github.com/matthieua/WOW

    If so how does this differ from that?

    0 points
    • John KimJohn Kim, 7 years ago

      It's free! :P

      0 points
    • Erik TerwanErik Terwan, 7 years ago (edited 7 years ago )

      Try scrolling up & down, wow.js just triggers the animations once. And wow.js minified is 8.22 KB while ScrollTrigger minified is 1.4 KB

      5 points
      • Thompson GeorgeThompson George, 7 years ago

        Big up

        0 points
      • Jared Pike, 7 years ago

        Is there an option trigger them just once?

        2 points
        • Erik TerwanErik Terwan, 7 years ago

          Not yet but i'm interested in this myself, so this might be a feature in the future ;)

          1 point
        • Jay KerrJay Kerr, 7 years ago

          I would love to see this as an option too.

          0 points
          • Erik TerwanErik Terwan, 7 years ago

            I recently added this option, just use the 'once' option in the data-scroll tag! Releasing v0.2 today with more legible/concise syntax.

            1 point
      • Julian LloydJulian Lloyd, 7 years ago

        wow.js is positioned as the companion to animate.css, which is a collection of CSS animations (as opposed to transitions). It’s chiefly this reason that wow.js does not trigger animations more than once, since reversing CSS animations is an entirely different beast than removing a CSS class with transitions.

        1 point
  • Dustin CartwrightDustin Cartwright, 7 years ago

    Awesome work.

    Just a heads up though, the website isn't optimized for mobile yet. Text overlaps/cuts off in areas.

    0 points