Jump to content

Design Geek Studio

Image decompose on scroll

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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! 👍

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.