bewards

Resolved! Thank you very much

@OSUblake - has this changed since v3.8 (sep 2021 release)? I can see above that the 3rd card has it's style attribute value stripped upon timeline start and then works correctly once the progress of the card's tween is activated.

Adding once worked. I didn't realize toggle actions couldn't also be used for scrubbing purposes. I was looking to scrub in reverse ONLY WHEN onEnterBack. With the current implementation, the user can scrub in reverse all they want as long as they don't pass the end mark.

@Cassie and others - are you aware of a way to prevent reverse scrubbing? In my codepen above, the animation plays in reverse, even though I set the toggleAction to play none none none.

With the new API adjustments, I ended up with the following happy result: https://codepen.io/bensewards/pen/mdxgjve?editors=1010

Hey @Cassie - it's actually close to what I want to achieve, but the scrolling progress needs to control the timeline progress so that the animation scrubs forward instead of running all at once (in your above codepen, once the start trigger is hit, the animation runs fully)

Hey Cassie - Thanks for putting that together - it is what I am looking to achieve. When I first wrote this, I believe I was working with a version of GSAP (<3.9) that had me construct the scroll trigger differently. In my example, the scroll trigger manages the timeline in order to update the progress of the component timeline. I'll take a closer look at the latest GSAP@3 to see if what I'm doing has to change.

Minimal Demo from Codepen: https://codepen.io/bensewards/pen/JjLVZeO

From the codepen, the green component block near the bottom of the page has a list of cards. The parent component creates the overall timeline and each card element creates a tween with options and adds it to the timeline with the from method and an optional position (if position prop present within the gsap-tween-vars attribute). The first two cards are working fine, but the last card breaks. After inspecting, it looks like the card does start off with the style value having the -120 translate, but once the progress starts, the card style attribute value becomes blank, so the card ends up jumping to it's normal position (seen in screenshot below). At some point in the scrolling progress, the 3rd card gets the style value back and does the animation like the rest of the cards. It looks like it gets the animation back once the position is met. If you reload the page in the middle of the animation, the page will reload and quickly scroll to after the start point, possibly avoiding the above style value removal and the 3rd card progress kicks in:

Thanks @OSUblake - exactly what I was looking for. I added a data-attribute to disable backwards scrubbing so now I can switch between the options. A lot to learn!

I am looking to use ScrollTrigger with the scrub option to control a GSAP timeline, but only updating the progress of the timeline/tweens when going forward in a position that has to be progressed. I did take a look at this post that says to use the onUpdate callback event to update the progress, but for some reason it's not working with how I set up the animation. When I scroll down half way through the animation and start scrolling back up, the progress reverses. From the codepen, I added gsap data-attribute options at the timeline and tween levels (timeline for the component, tween for the individual elements within the component so that I can provide different options, such as "position" to create the stagger effect). I've added the callback within the GSAP Timeline.scrollTrigger object.