over 5 years ago from Stephen Weir
Im looking for the best way to add animations when the user scrolls up and down.
https://github.com/michalsnik/aos
https://github.com/jlmakes/scrollreveal
These are the two options im looking at but want to know if any of you have used them or other options or even if you have your own code ect.. il look any anything the more lightweight the better :)
Recently discovered this well made library.
I've used Waypoints.js before and it was quite nice http://imakewebthings.com/waypoints/
I use this library is nearly every project I work on these days. The API is well-documented, and easy to parse.
10/10.
ScrollTrigger looks good. Worth having on your list to check out. https://terwanerik.github.io/ScrollTrigger/
Came here to mention that soon some of these libs will be obsolete as the browsers are introducing in native APIs to handle elements being scrolled into and out of view. Check out the Intersection Observer API
I'm looking foward for that! =)
I've been using Scrollmagic and anime.js for a recent project and had some pretty great success. It takes a little extra work up front to integrate, but the combination of the two libraries is under 20kb (compared with the nearly 90kb of GSAP+Scrollmagic) and jank is nearly non existent.
Granted, this is only necessary if you want scroll-based animations and not just scroll-triggered ones.
Scrollmagic still good? Last update is 3 years ago! Looks like the project is abandoned.
Greensock is a great animation library for the web try using that in combination with Scrollmagic.
Not 1 mention of WOW? https://github.com/matthieua/WOW
http://scrollmagic.io/examples/ is the best I found
scrollMonitor is Really fast and supports Nested scrollers, Fixed Positioning and Locking.
This looks good! Modern javascript. Passive event listeners. Would be even better if it works with the new Intersection Observer API. Only downside for me is it doesn't work with horizontal scroll.
Hi!!
Scrollmagic and gsap are one of the best options
I use scrollmagic. Very powerful. Not sure how it compares to other stuff, but it was fairly easy to pick up.
Check out ihatetomatoes' video tutorials on youtube – will get you up in running REALLY fast https://www.youtube.com/playlist?list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU-
If you don't like coding and want something nice and simple there is a new Scrollsequence WordPress plugin that can do full page image scroll animations.
Website: https://scrollsequence.com/
So as you scroll up and down, images in the background changes and makes a "video" like effect.
I believe it uses GSAP as animation engine, same as ScrollMagic .
I like using AOS as it's very simple to use and easy to add custom effects.
These libraries look really good, especially for Rellax for parallax effects.
I'll apologise in advance for the unsolicited advice, but please do consider not modifying native scroll behaviour. It breaks something that works (and conforms to user expectations) for, in many cases, a poorer user experience. It forces a particular temporality on the and takes control away from her.
I'm sure you were not planning on scroll-jacking, but since I see scroll animation libraries abused so much (even by Apple for the Mac Pro!;it's rather frustrating), I thought I'd mention.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now