Delay the animation on scrolltriger

[bootstrap007 6 Likes (Newbie)]

Hi,

As you can see that the yellow color box is animating to the screen from the left side then the Green color box came on top of the yellow box. But the green box is immediately animating away from the screen without staying there for few seconds even if the user scrolls. So is there a delay function even if the user scrolls continuously the green box should stay on top of the Yellow box for some time then it can animate and go away from the screen. Any help would be highly appreciated.

 

 

Thanks

 

See the Pen bGWJEWX by bootstrap007 (@bootstrap007) on CodePen

[OSUblake 18,497 Likes (Superhero)]

14 hours ago, bootstrap007 said:

So is there a delay function even if the user scrolls continuously the green box should stay on top of the Yellow box for some time then it can animate and go away from the screen.

 

Not really. That's what pinning does. If you want to change when the animation starts, you can use the position parameter.

[GreenSock 18,596 Likes (Superhero)]

Yep, Blake is right. You can just add a dummy tween in there too if it's easier, but using the position parameter is probably the best option. Here's an example with the dummy tween: 

See the Pen VwbNWpm?editors=0010 by GreenSock (@GreenSock) on CodePen

[bootstrap007 6 Likes (Newbie)]

Thanks OSUblake & GreenSock (Jack)

I have actually used a dummy tween before the next animation happens/take place and it was working fine. But then I thought there must be a proper way to do it something like a delay function for scrolltrigger. 

 

Thanks to you both.

 

[GreenSock 18,596 Likes (Superhero)]

Yeah, and just to be clear, Blake's suggestion of the position parameter is the best one in my opinion. The "dummy tween" is more of a hack I would definitely recommend learning about the position parameter because it's super powerful.