Element within ScrollTrigger animation starts with no position offset

[bewards]

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:

See the Pen rNzxOdz by bensewards (@bensewards) on CodePen

[GSAP Helper]

Is there any chance you could provide just a minimal demo? The one you included has a ton of other stuff going on and leverages various other libraries. The key to troubleshooting this and getting a solid answer is isolating it as much as possible. 

 

Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. .

 

I think I see the issue you're talking about, but there are just so many other things going on and so many factors that it's very difficult to effectively get you an answer. 

[bewards]

Minimal Demo from Codepen: 

See the Pen JjLVZeO by bensewards (@bensewards) on CodePen

[Cassie]

Thanks for putting that together, but that's pretty complex still. When we're debugging GSAP issues we really want to focus on the GSAP side, there's so so much custom logic here.

Let's just focus on the desired output. Is this what you're expecting to see?

See the Pen dymLjVr?editors=1010 by GreenSock (@GreenSock) on CodePen

 

[bewards]

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.

[bewards]

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)

[bewards]

With the new API adjustments, I ended up with the following happy result:

 

See the Pen mdxgjve?editors=1010 by bensewards (@bensewards) on CodePen

[Cassie]

Brilliant! Glad you got it working, that looks great

[bewards]

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

[Cassie]

Scrub and toggleActions can't be used together. They have different use cases.

maybe?
 

once

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

[bewards]

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]

Sorry was there another question there or did once do the trick?