Jump to content
GreenSock

artyor

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

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×