Just keep scrolling...
A trend in web animations for a long time has been to make elements on a page enter in with an animation triggered by scrolling. This can be seen in lots of places online, but some of the best in my opinion are on Apple's product landing pages: iPhone SE.
By tying the animations to scroll it gives the user a smooth and engaging experience on the webite, meaning they stay longer and enjoy using the site - even if it's just while they read about things like phone specifications.
ScrollMagic
One of the ways I have built animations like this in the past is with ScrollMagic. ScrollMagic meant that I could run specifc animation code on triggers in the scrolling of the web page. It also allowed for pinning elements and animating around them.
The problem was that I often found it very hard to set up exactly what I wanted. Often things would trigger at the wrong time and my code would look horrendously messy, with callback functions everywhere and using setTimeout to akke sure things ran when they had to. It was exhausting, not to mention lead to messy, unresponsive animated websites (a prime example is this: Earth's Ekko a site I built a while back with scrolling animations, that is not my best work 🤦♂️).
Enter GSAP!
GSAP has always been a cornerstone of web animations. It's fast, easy, and can add infinite amounts of flavour to an otherwise dry website.
I would always use GSAP in conjunction with ScrollMagic, but now the GSAP team have come up with their own version of scrolling animations in the ScrollTrigger plugin. I gave it a go and it's everything I could ever want from a scroll animation plugin! The code is elegant, simple to write - and it can simply run even the most complex scrolling animations perfectly.
It has all the same features that ScrollMagic did - trigger animations and pinning elements, but it is baked into the GSAP Tween methodology, and so can also add delay, scrubbing and so much more!
Here is a quick demo I set up to test it (scroll to start animating):
This took me all of about 10 minutes, and this means that as a developer working on a production site I can focus more time on making my site perform well and size responsively, rather than messing around with animation bugs for hours on end.