Jump to content
Search Community

scrolltrigger different animation on enter/leave

perfecti test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

It all depends on what behavior you want exactly (you could build this several different ways) but I'd probably just create those tweens dynamically and set overwrite: true (or "auto"). One of the problems in the way you've got it structured is that you're pre-creating just two timelines that will lock in their starting/ending values, thus they're not dynamic. So, for example, if you scroll quickly and some of the animations are halfway done but now you want those same elements to go to a different end value that's controlled by a different animation instance which you then .restart(), the values will jump. That's not a bug - it's a logic issue in the way you've got it coded.

 

So I'd do something sorta like:

onEnter: () => {
  gsap.to(".targets", {..., overwrite: true});
}, 
onLeave: () => {
  gsap.to(".targets", {..., overwrite: true});
},
...

That way, it's totally dynamic and the animations will pick up exactly where the other left off. 

  • Like 1
Link to comment
Share on other sites

18 hours ago, GreenSock said:

So I'd do something sorta like:

Thank you, now it really works as it should, though a bit of a  difficult way

 

18 hours ago, GreenSock said:

That's not a bug - it's a logic issue in the way you've got it coded.

Yes, I understand that gsap was just doing his job, it's just that sometimes it's not clear how to do such things correctly

Link to comment
Share on other sites

15 minutes ago, GreenSock said:

I don’t understand what you mean. Can you please explain? Why would you need a timeline?

For example, if I need to animate not one element, as in the example above, but several different ones in a certain sequence

Link to comment
Share on other sites

Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. 

 

onEnter: () => {
  let tl = gsap.timeline({defaults: {overwrite: true}});
  tl.to(...).to(...)...
}

 

If you're still struggling, please provide a minimal demo and we'd be happy to take a peek. Good luck!

  • Like 1
Link to comment
Share on other sites

8 hours ago, GreenSock said:

Sure, if you're just staggering them (same animation for all, just offset), you can simply use a "stagger" on a single tween. No need for a timeline. But yes, if you need to animate various things differently, you can absolutely use a timeline that you create in the callback(s). Just make sure you set overwrite: true (or "auto") on the tweens to ensure you don't create conflicts. 

oh thanks, i tried creating it outside of the callback

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.
×
×
  • Create New...