Image decompose on scroll

[Design Geek Studio 1 Likes (Newbie)]

Firstly, thank you team (and others) for your quick replies.  The codepen tutorial was a lifesaver.  Here's my issue: I'm trying to make a puk decomposition on scroll similar to the glock demo. 

 

 

I have the animation working 

 

See the Pen eYEWyya by Designgeekstudio (@Designgeekstudio) on CodePen

 

but when I apply scrub: "true". I have no control and the tweeting and easing goes away.

 

See the Pen KKvmZQr by Designgeekstudio (@Designgeekstudio) on CodePen

 

 

See the Pen MWaWPmG by GreenSock (@GreenSock) on CodePen

[GreenSock 18,878 Likes (Superhero)]

I don't really know what effect you're going for here, but I noticed a few problems:

1. You didn't set a start or end value, so it's using the defaults of start: "top bottom" and end: "bottom top", so since your page already has the element well into view on load, it's rendered as if the tween is a large percentage of the way finished. 
2. You didn't set up your page to have any scroll whatsoever. So you won't be able to see any animation on scroll (since there's no scroll). You could make the body a height of 400vh, for example, to make sure there's scrolling room.
3. It should be scrub: true, not scrub: "true"

This might be a better starting place for you: 

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

[Design Geek Studio 1 Likes (Newbie)]

Thank you for your help. 

However the cap needs to move as one piece. 

 

This is the effect I'm going for:

https://jehvideohosting.s3.us-east-2.amazonaws.com/Puk_Explosion_2.mp4

 

 

[GreenSock 18,878 Likes (Superhero)]

Sure, that's totally possible.

 

My advice would be to just get the standalone animation looking the way you want (without any scroll) and THEN hook it up to the scroll with ScrollTrigger. 

 

We don't have the resources to build it all for you, but I see that you posted in the Jobs & Freelance forum which is a great idea if you need more help. We're happy to answer any GSAP-specific questions here, of course. Or if you'd like to hire us to help you, feel free to contact us. 

[Design Geek Studio 1 Likes (Newbie)]

That mp4 is a standalone animation I created in Adobe Animate. I have the code that it exported, but figure this would be the better route than applying strollTrigger on top of it. I'm not necessarily looking to have it built for me if I can get someone to help connect the dots. Yes, I posted in freelancers section in case there wasn't any additional help. But you have definitely helped in getting me started. 

[GreenSock 18,878 Likes (Superhero)]

Yep, it should be pretty straightforward. Start with all the elements in their starting positions (overlapping), then create a timeline with "y" property tweens for each to put the elements in their "spread out" state. Wire the ScrollTrigger to that timeline, and you're done! 👍