DevC

@mvaneijgen looking good thanks. Is it possible to animate `progress` though? I'd like to have that little bar animation on click like in my initial try above.

Hi, I have this autoplay progress bar below. I've added clickHandlers to [Step 1, etc] and the bar zooms to the clicked step and stops, but I'm having a bit of trouble organizing the accompanying tweens. 1. Animating the active step label and the previous. 2. Transitioning the slide. Thank you!

@Trapti marvelous options here. Thanks for taking the time. Client killed the interaction in-flight so never got back here. It be like that. 😜

Hi, this demo is designed to color each word as you scroll through the page. I elected to use classes because there are items in the array that need to be styled differently and I couldn't figure out how to do that with `to` properties. If you scroll fast or back and forth you'll notice words don't drop their class and stay colored. I'm curious how to combat this or how you would build this correctly.

Future me - if you're selecting 2 siblings, make sure you're selecting the modifier class and not the base class that they share! ?‍♂️

You rock! It's working great.

Hi, Experiencing some glitches with horizontalLoop helper. I have list items overlapping and popping in and out like image shown below. Just wondering if my implementation is off or if the helper is not quite the tool for this component. I attempted to use this at the most basic case, but still experiencing some issues. Thanks for any help.

Exactly it, thank you

Or if it makes more sense, I'd like to replicate the asset above by cutting it in half and looping it within the scroll movement. The asset of 442 frames is for illustration of final product I'd like to land on. It should end up 221 frames obviously ?

Hi, working on a scroll-based PNG sequence and I need to optimize the asset a bit. The raw asset plays forward then reverse. I'd like to cut the amount of frames in half and just reverse the asset on my own. Any idea on how to do that within the scroll movement?

I have an animation that runs through a list of hsl colors as you scroll over sections. I'd like to be able to define which index the object starts on per section. Also, I took a shot at making the list loop back around to index 0 once you've reached the end of the array. Not sure if this is correct.

@Rodrigo Ah, missed that. Yea, so the 'hero' should just have the same animation the other sections have - the bar translates upward. It seems this actually works just fine with the right combo of start and end. Thanks for having a look.

Does it make sense for the hero to have a tween it's own? Will scrolltrigger handle things from there?

I have a fixed element that animates when it enters certain sections `.gradientTrigger`. Even after adding this class to the hero I'm not getting desired result. I'd like to call the animation on load and then let scrolltrigger do it's business on scroll.

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

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. 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>

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

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.

Wondering if I could piggyback on this. Very similar, but I have a fixed position element that's listening for certain sections, but also needs to fire on load in the hero. Is it better to create a separate instance for the hero or is there some better way?

You rock. Thank you. For any future visitors, this type of component thoroughly borked the order of my tweens. If you find yourself with mismatched start points on the subsequent pieces, you'll want to check out `refreshPriority`.

Thanks for the help. This is getting closer, but one thing I can't figure out. Each `scene` is going to have it's own image sequence. I need to run through the sequence before transitioning to the next scene. Playing with your example, after adding any siblings after the one with the image sequence it no longer scrubs through the images. For simplicity, this fork doesn't actually use anymore image sequences, only more scenes. Don't want to complicate. https://codepen.io/dcha/pen/rNKgbJp

I've simplified the code so the video piece doesn't confuse anyone. The desired outcome is a pinned container with 4 stacked sections within. I'd like each section to stay pinned until you've scrolled through the full animated sequence. I've thought using a scroller might be the solution or a timeline within a timeline, but I know these can get very complicated. https://codepen.io/dcha/pen/wvPvXQb

There's both in the code. Can you have another look?

Trying to understand how to scrub through a PNG sequence only once it's revealed in a pinned stack of absolutely positioned sections.