Unable to animate same element in different timelines using scrollTrigger

[Ravi Sirswa]

https://codesandbox.io/s/naughty-rui-06693d?file=/pages/index.js

 

You can see this link,

Basically I want to animate the green box differently in all panels.

I'm pinning panels and animating the box.

Problem is that the first tween of box starts from the last and it doesn't inherit the values from previous tween.

[SteveS]

Can you better describe your problem? I looked at your demo and it seems to be working as one would expect.

[GreenSock]

I'm not quite sure what you mean either, but my best guess is: 

1. Set immediateRender: false. By default anything with a ScrollTrigger on it will render immediately in order to maximize performance (be ready to jump into action when the scroll position is hit), thus it is using the current value at that time when the tween is created. It sounds like you want it to wait until a previous ScrollTrigger-based animation executes, right? You may also want to look into the fastScrollEnd feature. 
2. Or just use .fromTo() so that you can control both ends of the animation rather than relying on the "current" value at the time the tween initializes. 

[Ravi Sirswa]

10 hours ago, GreenSock said:

I'm not quite sure what you mean either, but my best guess is: 

1. Set immediateRender: false. By default anything with a ScrollTrigger on it will render immediately in order to maximize performance (be ready to jump into action when the scroll position is hit), thus it is using the current value at that time when the tween is created. It sounds like you want it to wait until a previous ScrollTrigger-based animation executes, right? You may also want to look into the fastScrollEnd feature. 
2. Or just use .fromTo() so that you can control both ends of the animation rather than relying on the "current" value at the time the tween initializes. 

Thnks GreenSock, but the problem is not solved by using ImmediateRender: false and fromTo() tween yet.
If you look the code sandbox you can find the first time the page loads the animation works different and if we scroll to bottom of the page and then come to top, and then go downwards animation behaves as expected. 
Are you able to understand this is a bit confusing.

Also you can see the figma prototype. https://www.figma.com/proto/UeG3PY8J3n63F2S1fnML79/Untitled?node-id=1%3A82&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A2

[Ravi Sirswa]

10 hours ago, SteveS said:

Can you better describe your problem? I looked at your demo and it seems to be working as one would expect.

You can see in this prototype what I want to achieve basically.  https://www.figma.com/proto/UeG3PY8J3n63F2S1fnML79/Untitled?node-id=1%3A82&scaling=contain&page-id=0%3A1&starting-point-node-id=1%3A2

[SteveS]

I tried a few different ways of making it work, and this seems like the most straightforward:

 

https://codesandbox.io/s/muddy-water-xr4m9y?file=/pages/index.js:696-714

A few things:

1. Register plugins at the top of the document
2. immediateRender: false only works on from and fromTo tweens
3. I didn't change it in my version, but it's probably better to use the useArrayRef hook from the GSAP + React guide rather than manually put refs on.
4. Don't forget an empty dependency array at the end of your ULE hook to prevent re-renders
5. use autoAlpha instead of opacity

 

Maybe @GreenSock can shed some light on why other methods didn't work. Even with immediate render off on the first from tween, the rest of the tweens started from scale: 0 and autoAlpha: 0. If I had to guess, it is because the tweens are in different timelines and each timeline has it's own kind of "context" where the first TL renders before the next. I really wanted it to work without fromTo, but I couldn't seem to make it happen. Either way, this should function a solution.

[Ravi Sirswa]

16 minutes ago, SteveS said:

I tried a few different ways of making it work, and this seems like the most straightforward:

 

https://codesandbox.io/s/muddy-water-xr4m9y?file=/pages/index.js:696-714

A few things:

1. Register plugins at the top of the document
2. immediateRender: false only works on from and fromTo tweens
3. I didn't change it in my version, but it's probably better to use the useArrayRef hook from the GSAP + React guide rather than manually put refs on.
4. Don't forget an empty dependency array at the end of your ULE hook to prevent re-renders
5. use autoAlpha instead of opacity

 

Maybe @GreenSock can shed some light on why other methods didn't work. Even with immediate render off on the first from tween, the rest of the tweens started from scale: 0 and autoAlpha: 0. If I had to guess, it is because the tweens are in different timelines and each timeline has it's own kind of "context" where the first TL renders before the next. I really wanted it to work without fromTo, but I couldn't seem to make it happen. Either way, this should function a solution.

Thanks a lot @SteveS for working as deep in this topic.

but the main problem is still there. If you look at the box in first panel it starts from rotation 30, but it should not be rotated, i tried almost everything I found on internet to solve this problem. But didn't get any helpful solution.

 

BTW  you taught a nice and simple to do the work I did. Thanx for this. 🥰😃

[SteveS]

Sorry about that, I fixed it by making the first tween a fromTo.

[Ravi Sirswa]

8 minutes ago, SteveS said:

Sorry about that, I fixed it by making the first tween a fromTo.

@SteveS don't be sorry. I really appreciate your efforts to make my day😃.

 

Thanks a lot Steve, it seems working now.

[GreenSock]

12 hours ago, SteveS said:

Maybe @GreenSock can shed some light on why other methods didn't work. Even with immediate render off on the first from tween, the rest of the tweens started from scale: 0 and autoAlpha: 0.

Did you set immediateRender: false in the scrollTrigger:{}? Since the ScrollTrigger was on the timeline, that's where you'd need to put it. If it was just on a loose tween, it'd be fine to set it inside or outside of the scrollTrigger:{} object, but it's not like the timeline can look inside of every one of its tweens to see if any have immediateRender: false (well, it could but that'd be pretty wasteful performance-wise). 

 

If that doesn't clear things up, it'd be super cool if you could share a minimal demo (ideally without React) showing the problem. 

[Ravi Sirswa]

1 hour ago, GreenSock said:

Did you set immediateRender: false in the scrollTrigger:{}? Since the ScrollTrigger was on the timeline, that's where you'd need to put it. If it was just on a loose tween, it'd be fine to set it inside or outside of the scrollTrigger:{} object, but it's not like the timeline can look inside of every one of its tweens to see if any have immediateRender: false (well, it could but that'd be pretty wasteful performance-wise). 

 

If that doesn't clear things up, it'd be super cool if you could share a minimal demo (ideally without React) showing the problem. 

@GreenSock It works for only the green box but other of the animations are not working??

[Ravi Sirswa]

It worked by changing other tweens 'from' with 'fromTo'.