Implement Gsap ScrollTrigger into project

[Jakebogan]

So I made my very first online portfolio website, https://www.jakebogan.com. I have a lot of animations and decided to use CSS animations instead of relying on JavaScript. The issue is now the website is taking a big performance hit and looks sluggish. I came across Gsap ScrollTrigger but I'm not sure how I can produce the same effects that I have in my website. Meaning as you scroll one animation takes place, then in another section a completely different animation takes place, and then when you scroll back up the page each section will produce the animation again. So, I would like to use Gsap ScrollTrigger and start my website over from scratch to implement it in. My question is, how can I use Gsap to obtain the same results as my website? Is there an example someone might have to get separate sections to animate up and down the page, along with other animations?

 

Now I have went to Codepen and saw plenty of examples, however they were only examples of one big animation section, not multiple independent sections like mine. So I'm not sure how to fire off animations on multiple sections. If you could visit my website to get the gist of what I'm referring to that would be great. Thanks:)

[ZachSaucier]

Hey Jake and welcome to the GreenSock forums. Cool looking site. I think you're going to love GSAP and ScrollTrigger  

 

I recommend started out with the GSAP Getting Started article. Then you might progress onto my article about animating efficiently, then perhaps the ScrollTrigger documentation. 

 

As for how to set up that sort of thing, there are two main ways you could set it up:

1. Use a different ScrollTrigger for each section. When a section is entered, you play the relevant animations.
2. Use a single ScrollTrigger for the entire page. Inside of its onUpdate callback, when a certain progress value has been passed, you play the relevant animations. 

In both circumstances you'll want to pause any non-visible animations to make sure the performance is as good as it can be.