Fixed element animates with with different sections

[DevC]

 

Hi,

 

I have this fixed svg at the bottom of the page and I'm trying to do 1 thing.

 

 

I'd like to be able to wrap sections in a class (.gradientTrigger) and control the svg bar animation as you scroll over them. At the bottom of this demo I have section with 3 scenes (GradientBar). Looking for a clean way to animate the linear gradient as each one hits the viewport.
 

 

See the Pen GRGaLvV by dcha (@dcha) on CodePen

[GSAP Helper]

Howdy @DevC! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

[DevC]

Made an edit to the OP and scoped the codepen to certain things. Thanks

[Cassie]

Thanks for that! 

You could use onToggle to trigger animations?

See the Pen OJwaRgJ?editors=0011 by GreenSock (@GreenSock) on CodePen

[DevC]

@Cassie. That gets me close. It's okay if the color changing piece restarts at each `gradientTrigger`, but when you're inside section like this it should be stepping through the gradient object at each vh. So another foreach that runs in the bigger foreach? 🤔

<div class="gradientTrigger">
  <section class="vh"></section>
  <section class="vh"></section>
  <section class="vh"></section>
</div>

 

[Cassie]

Yep, that would work!

See the Pen PoBxWYE?editors=0111 by GreenSock (@GreenSock) on CodePen

[DevC]

Thanks for the help. Last one for you. There's a sweet spot around the scrollMarkers where you can end up with no bar visible on the screen. It dumps all the hsla values to zero and then animates to the next value. I reckon this is something to do with toggleActions which incidentally doesn't allow you to go through the animation in reverse. Any thoughts?

[Cassie]

Ah yeah, you'll immediateRender false on that so that it goes from the current state rather than a pre-cached state. I updated it for ya!

[DevC]

Sick! That worked and solves another issue I saw. Thanks for your time.