Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Olly Grunt

Play animation when in viewport AND previous animation has finished

Go to solution Solved by GreenSock,

Recommended Posts

I would like an animation to play when it enters the viewport, but it must wait until an earlier animation has finished. If the earlier animation has already finished it can play immediately on entering the viewport.

 

Can someone point me in the right direction as to how to approach this? Thanks

Link to comment
Share on other sites

Hi Olly,

 

I think this is kind of hard to answer without seeing what you're doing and what your expectations of the behavior are. Do you think you can put together a minimal demo, maybe with really simple animations like moving a box? Thanks!

 

Link to comment
Share on other sites

  • Solution

Yeah, here's a quick rough idea: 

ScrollTrigger.create({
	trigger: ...,
	start: ...,
	once: true,
	onEnter: () => {
		gsap.to(..., {
			...
			// add a delay based on how much of the other animation is left to play
			delay: otherAnimation.totalDuration() - otherAnimation.totalTime()
		});
	}
});

 

Link to comment
Share on other sites

Hi,

Thanks Jack! I think your solution will do the trick.

 

Olly

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