Cazza
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Cazza
-
-
I need just one of these animations to be run at a time, as an either/or, controlled by the user.
Start by running Timeline A (repeating to infinity).
When button B is clicked Timeline A to stop and Timeline B to start animating, repeating infinite times again.
When Button A is clicked I would like Timeline B to stop and Timeline A to start animating.
I just can't get the logic right. Is it easier to use two separate timelines or do I need a master timeline and labels?
This is a simplified codepen and in the real situation I can't rely on the length of time any of the timelines take to complete as they are dependant on user interactions.
Thanks for any help!
-
46 minutes ago, OSUblake said:
You need to load the latest version of Draggable and get rid of the old version of TweenMax.
https://cdnjs.com/libraries/gsap
Please note that my demo is not a good solution, and I'm not going to fix any problems with it as that would take too long.
Brilliant! Thanks for your help, all sorted now. It's doing what I need it to do and now I know how to migrate properly.
-
-
On 4/28/2020 at 3:44 PM, ZachSaucier said:
This was actually one of the things that I first wanted to do using the MotionPathPlugin. As long as the overall direction of the path is linear (and doesn't have angles too steep like circles) you can do it using this approach:
Zach, I've had a little play with your pen and managed to make it draw a line as it goes along and also only to allow forward movement - very pleased with this!
See the Pen eYpEZwe by cazzac (@cazzac) on CodePen
Now I'm working on how to make something happen when the dragged rectangle reaches the end of the line
-
2
-
-
Thank you Craig, I will have another look at those pens. I think my main problem with these is trying to make them work with GSAP 3 as I'm not understanding all the differences so I keep introducing errors as I try to migrate. I'll keep at it though!
Zach - thanks for your help. That method is super-interesting. I'll have a play and see if I can apply it to my shapes. In my final project I will have some sharp angles so it might not be the best way to go for me. At the moment though I'm happy to just try things out and learn as I go.
-
Hi all, I hope somebody can help me. I'm new to GSAP3. I have looked at many example pens but none of them are using GSAP 3 to drag an object along a path. When I try to adapt them using the migration guide I just get lost due to my noobiness - there are so many ways to get things just a tiny bit wrong which breaks my code entirely.
In my demo codepen, there is a red arrow moving along a red wavy line, whilst drawing a fat line over the top. At the end, a red smiley face appears. This bit is working.
What I want to happen with the blue line is for the user to drag the arrow along the path of the blue line. As they drag the arrow along the line a fat blue line is drawn over it (similar to the red line above). Then when they reach the end point of the line and release, a blue smiley face appears.
I don't need any fancy eases or inertia throw stuff, I want to keep it really simple. I can't find any way of attaching the draggable arrow to the line. Ideally I'd also like the arrow to only move forward along the wavy line - if the user tries to drag it elsewhere it shouldn't move.
Thanks, I hope this makes sense!
Basic timeline control
in GSAP
Posted
Thank you @Shaun Gorneau
This is a massive help! I'll try and apply your suggestion to my scenario. Hopefully that's all I need to get it back on track, but I'll come back to these helpful forums if I get stuck again 🥰
Cazza