This is a second part of a guide helping front-end developers to choose the right approach when it comes to animations on the web.
Are you wondering whether to use CSS3 or JavaScript animations? This part explains your JavaScript options and reveals the best JavaScript animation tools available.
You might want to read the part one covering the CSS animations first or continue reading with JavaScript options below.
4. JavaScript/jQuery Plugins
When the creative idea is quite outside of the box, and you need to animate multiple elements at the same time or trigger animations by certain event you will need to start looking at some JavaScript or jQuery plugins.
These plugins let you define the easing, duration, delay, a callBack functions triggered on the completion of animation and let you chain or queue your animations.
If you have some jQuery experience, you can use .animate() method, which lets you to animate any numeric CSS property.
The syntax is well documented and you can create a quite advanced effects and animations, but you might run into performance issues if you push the limits.
For a basic scroll animations I would recommend Skrollr.js or Scrollorama.js.
They might look scary when you look at them for the first time, but once you animate your first element, you will find it very easy to create simple scroll animations on any site.
You can find an example of a Skrollr.js in action on my Merry Christmallax page.
JavaScript/jQuery Animation Plugins
JavaScript/jQuery Animation Plugins for scrolling effects
- Skrollr.js – Stand-alone parallax scrolling library for mobile and desktop
- Scrollorama.js – the jQuery plugin for doing cool scrolly stuff
- scrollReveal.js – Declarative on-scroll reveal animations
Related Tutorials
5. Advanced JavaScript Animation Tools
When it comes to a complex and advanced animations on the web requiring multiple timelines and animating multiple objects, there isn't a better tool then Greensock at the moment.
If you think that your client or designer has a crazy idea and there is no chance to do it on the web, than think twice.
Greensock
The number of jaw dropping sites claiming awards around the globe speaks for it self and there is no doubt that Greensock is currently the best available tool for creating astonishing interactive websites and animation effects.
Award winning sites using Greensock
- 24 hours of happy – The FWA Site Of The Year 2013
- Toyota Hall of Fame – The FWA Site Of The Day March 01 2014
- GMC – The FWA Site Of The Day March 07 2014
There might be a slight learning curve, but after checking a few Greensock CodePen demos, you will quickly realize that there really isn’t a limit to what you can do with it.
It took me a while to give Greensock a chance, because their ‘plain’ documentation just wasn’t for me.
Fortunately they started creating demos and presentations, which are great for getting to know the syntax in a more visual way.
Superscrollorama and ScrollMagic
John Polacek and Jan Paepke realized the power of Greensock and created a powerful libraries Superscrollorama and ScrollMagic for animations triggered by scrolling.
Once you get your head around the Greensock syntax you will be quickly able to create a more advanced scrolling animations.
I haven’t used ScrollMagic yet, but it should be improved version of Superscrollorama, which I have used on a project coming live very soon. I am looking forward to take ScrollMagic for a spin in the coming weeks.
Advanced JavaScript Animation Tools For Professional Developers
- Greensock – Professional-Grade HTML5 Animations
- Superscrollorama – The jQuery plugin for supercool scroll animation
- ScrollMagic – The jQuery plugin for magical scroll interactions.
Related Tutorials
- Create Apple navigation using Greensock
- Create the Apple Mac website navigation using Greensock
- Jump Start: GSAP JS by Greensock
Conclusion
There you have it, a list of my recommendations for the right approach based on your skill level.
How do you approach your advanced animations on the web? Have you used any of the plugins listed above? Which one is your favorite?
And let me know in the comment below if you would like to see any specific demos or tutorials. I would love to hear from you.
Are you into a parallax scrolling animations?
Join me in the Parallax Scrolling Master Class and learn how to build a parallax scrolling website from scratch using Skrollr.js.
I will teach you:
- how to move not only background images, but any element on the page
- how to be in control of your animations
- how to make it responsive without a headache
- or how to turn Skrollr off on mobile devices
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
Hi Pete,
Have been following your excellent tuts for a while.
Good start points for getting into the animation process.
Started out with Scrollr and have now progressed to GSAP as per your recommendations.
Here’s my first anim page with GSAP though it’s only live until the end of Easter:
http://www.tesco.com/easter/
Not that flashy, and far from perfect, but ok for a first time out.
A virtually impossible deadline met, 6 days start to end.
I’d like to see a ScrollMagic horizontal and vertical tutorial if you’ve the time?
Mike
Hey Mike,
thanks getting in touch. The page looks really good for a first try, nicely done!
ScrollMagic tutorial is on my long to-do list.
Stay tuned.
Hi Petr, I’m missing a mention of the Web Animations here. http://w3c.github.io/web-animations/
Hey Petr,
I really think a tutorial or master class on ScrollMagic like you did with Scrollr would be well worth the effort… there are many structural concepts (data attributes etc) in Scrollr that i (and many) find inferior to what ScrollMagic.
PS. i have many of your classes and I use them when teaching my Jr developers in house. They really are great!
Hi Caras, thanks for the feedback. I am putting together a lot of ScrollMagic resources, stay tuned.
Anything specific you would like to see (Cheatsheet, tutorials, templates or premium course)?