Adding scrollTrigger to element that's already been tweened with .to, doesn't play as I want

[artyor]

Hi all,

In this codepen I first use gsap.set to set .line element outside of .box (with yPercent), then I tween it with .to, and after that I use scroll trigger. In all 3 cases I manipulate yPercent. But scrollTrigger doesn't keep going from gsap.to, it resets itself to gsap.set and then it animates.

I want scrollTrigger to animate .line starting from position that's been set with gsap.to.

How can I acomplish this?

(Not sure if it's worth to note that in my non-codepen example I use load event listener to to tween after page is loaded)

See the Pen NWbXpqq by madebyigor (@madebyigor) on CodePen

[ZachSaucier]

Thanks for the clear demo!

 

The simplest solution is to apply immediateRender: false to your tween that has the ScrollTrigger.

See the Pen KKNZWWa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You might also want to use overwrite: 'auto' on the tween with the ScrollTrigger.

 

Another solution is to use the onComplete of the tween that runs on load to create the tween and associated ScrollTrigger.

[artyor]

7 minutes ago, ZachSaucier said:

Thanks for the clear demo!

 

The simplest solution is to apply immediateRender: false to your tween that has the ScrollTrigger.

 

See the Pen

See the Pen KKNZWWa?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

You might also want to use overwrite: 'auto' on the tween with the ScrollTrigger.

 

Another solution is to use the onComplete of the tween that runs on load to create the tween and associated ScrollTrigger.

Hi Zach, thank you for responding.

When I did search on forum I found immediateRender, but video tutorial said it's used only in from or fromTo, so I didn't even try to use it. Thanks, this will sort my problem!

I will also take a look into onComplete option as it seems the best practice scenario, but also a bit more advance.

Thank you again.

[ZachSaucier]

4 minutes ago, artyor said:

video tutorial said it's used only in from or fromTo

Yeah, that was the case. A .to() tween with a ScrollTrigger is a special case. What video tutorial are you referencing?

 

7 minutes ago, artyor said:

I will also take a look into onComplete option as it seems the best practice scenario, but also a bit more advance.

It's actually pretty simple. Here's how I'd set it up:

See the Pen KKNZWeq?editors=0010 by GreenSock (@GreenSock) on CodePen

[artyor]

2 minutes ago, ZachSaucier said:

Yeah, that was the case. A .to() tween with a ScrollTrigger is a special case. What video tutorial are you referencing?

 

It's actually pretty simple. Here's how I'd set it up:

 

 

Thank you for another example!

I was referencing video from this thread

 

[tailbreezy]

17 minutes ago, artyor said:

but video tutorial said it's used only in from or fromTo

 

It applies to ScrollTrigger as well, because it initializes on page load.

To verify, if you set it up after the .to have finished it will work as you expect.

[ZachSaucier]

17 minutes ago, artyor said:

I was referencing video from this thread

Ah, yeah. That's a very old video. I'll a note about it applying to .to() tweens with ScrollTriggers attached as well.

[Shrug ¯\_(ツ)_/¯]

23 minutes ago, ZachSaucier said:

I'll a note about it applying to .to() tweens

 

Just a heads up in case you want to add it also. Searching the docs for immediateRender does not return gsap.to() or Timeline.to() either, only from() & fromTo(). It does show .to() referenced in the Tween doc though for immediateRender.