Jump to content
GreenSock

perfecti

scrolltrigger different animation on enter/leave

Go to solution Solved by GreenSock,

Recommended Posts

Hello, I don't understand how to make different animations for the enter and leave of an element. Now I commented out onLeaveBack, otherwise, if you scroll quickly, the animations start to interrupt each other. Oh onEnter animation too

 

How to solve such problems correctly?

See the Pen YzEwdxR by Speculant (@Speculant) on CodePen

Link to comment
Share on other sites

  • 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

And somehow you can adapt it to the timeline or animation of each element, you need to write it inside onEvents?

Link to comment
Share on other sites

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

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