fd_alistair
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by fd_alistair
-
-
Hi there - I'm trying to detect the percentage progress of an animation so I can warn the user that it's nearly finished.
I could do an onStart and combine it with a setTimeout, but hoping there was a better solution using just GSAP
Any help would be appreciated
See the Pen MWVqXxd by fuzzyduck (@fuzzyduck) on CodePen
-
2 hours ago, mvaneijgen said:
You can use
.restart()for that if you want it to happen on clickIf you want it to happen as soon as it is done, indeed the code @elegantseagulls suggests works. You had some functions in your code that didn't do anything, so I connected them to each other. Hopefully there is something in their that helps you.
Many thanks, that's ace!
-
Hi there - is it possible to return my div to its initial start position once it has reached the end of the path?
I would image this could be done with onComplete: but not sure how to do it.Basically I need the div to return to it's previous position so I can tell it to start again with a button press.
Any help would be appreciated.
Thanks
See the Pen ExEeyNN by fuzzyduck (@fuzzyduck) on CodePen
-
3 minutes ago, iDad5 said:
My bad, your walk never ends
So onRepeat is what you are looking for.
Legend! - thank you
-
1
-
-
4 minutes ago, iDad5 said:
Just a onComplete on the tween (gsap.to()) should do the trick. If you think about it, what ist completed isn't the motion-patt (the road you walk down) but your movement (the walk you took).
Does that clarify things, or do you need more help?Ok thanks - I had tried that previously...am I doing something wrong? :
See the Pen YzaeaBG by fuzzyduck (@fuzzyduck) on CodePen
-
Hi there, I've checked the documentation for MotionPath and can't see the ability to add a callback function for when the animation has completed?...ideally I'd like this to be called at the end of each loop.
Any help would be appreciated.
Regards
Al
See the Pen wvmymvz by fuzzyduck (@fuzzyduck) on CodePen
-
56 minutes ago, Cassie said:
Ok thanks for getting back to me, looks very interesting.
Looking at the documentation I can't see a way to stop the looping from top to bottom, is that possible?
Also, is it possible to keep the multiple text animations within the sections, before moving on to the next section? -
Hi there, we're using scrolltrigger to move though sections, within those sections there are multiple text boxes that are animated in.
We're trying to get this work on a touch-screen device so the user cannot scroll automatically from the first to last section with a quick swipe....is there anyway of restricting this?
Any help would be appreciated
See the Pen ZErpdQL by fuzzyduck (@fuzzyduck) on CodePen
-
3 minutes ago, akapowl said:
I don't really think it is being ignored - it is more that browsers don't work like that with regard to those properties ( width --> max-width e.g.)
As you can see here, while there is a max-width set on the box and thus the browser will display it at that max width set, you can still set the actual width of the box to something very high like "100000px" via JS - so it is not a GSAP related problem, you're running into. That width value will keep increasing in your example, no matter what max-width you are setting.
For what you are up to achieve, you will likely have to use some sort of function including clamping, like with gsap.utils.clamp
Now I'm not sure if tis here is the cleanest approach to that, or if it could even be made more concise using other gsap utility functions, but it does do the trick with what I understand you are up to.
Ok thanks! that certainly does the job.
Kinda odd this isn't a feature of GSAP? -
12 minutes ago, Cassie said:
I don't often see people using maxWidth and minWidth in GSAP tweens.
A minimal demo would go a long way towards helping you figure this out!Thanks, Try this: - as you can see it stops at the correct width but keeps on adding the width
-
Hi there - I have set a min and max width on a div, however the code below constantly adds 100px to the divs width even though a maxWidth has been set in gsap and CSS, it stops at the correct width, but if you look at the code the width keeps on increasing.
Any ideas please?
See the Pen XWVGVNj by fuzzyduck (@fuzzyduck) on CodePen
-
23 minutes ago, OSUblake said:
Yes, it's possible. It's just math. But it's not easy. Not only do you have to detect collision on every movement, but you have to figure out the response if there is a collision. Like how far to move the object back. And things get really tricky if your blobs have a concave parts in them. You have to break down your shapes into smaller areas.
Matter.js is a good library to check out.
https://github.com/liabru/matter-js
And SAT.js
https://github.com/jriecken/sat-js
Ok thanks for your help
-
7 minutes ago, Shrug ¯\_(ツ)_/¯ said:
The below linked thread has some things that may be helpful conceptually, however concerning GSAP inherently ...
Thank you! - that's exactly what I needed to know, I will try other methods
-
15 minutes ago, _Greg _ said:
Hi @fd_alistair
There is many variations for your idea
You can read forum about SVG and about Collision
Thanks...so basically just go read a book? - I'd really like to know if this is possible first as there is nothing in the examples you have shared which demonstrates this.
-
Hi there, I'm trying to build a game where you move an SVG up, down, left right, using cursor keys (let's say a blob), but when that blob touches the inner edge of another SVG (no matter what shape it is) it can no longer move beyond that edge.
Just wondering if this is possible with GSAP? - I know you can do collision detections with outer edges of SVGs...but not sure if possible for an SVG within an SVG?Any help would be appreciated
Thanks -
Very nice - I'll study it
-
Hi there - I'm trying to simulate the slicing of vegetables with a downwards swipe and I'm really struggling to find a viable solution - I have had a look at the below post but it's not quite what I'm after. I need to have multiple points of swipe down, fix it so you can only go down (not back up) and then have an event once each one is complete.
I believe this can be done with SVG masking what is the background (or chopping board) on top of the vegetable.
Any help would be appreciated.
-
Thanks!
-
....just following up on this - I'm struggling to find a way to stop the animation - is it possible to create a 'stop' button which pauses & cancels the animation where it is?
On 2/12/2020 at 4:36 PM, ZachSaucier said:Hey fd_alistair and welcome to the GreenSock forums!
It sounds like you want the duration to be based on the distance that the line needs to go instead of a set duration?
If so, you can do that by using the width as part of the duration calculation like so:
I added some comments to make it more understandable. I also upgraded you to GSAP 3 because the version of GSAP you were using is really old and GSAP 3 is way better!
-
Works a treat! many thanks
-
Hi there, I'm new to Greensock but managed to create a quick code pen.
I've created an animation which goes from 500px to 0px over 10 seconds.
I've created a button which adds 100px to the width on click, however if you click the button multiple times it looks like it queues the animation and takes too long to restart the animation.
Any help would be appreciated.
See the Pen KKpdZoo by fuzzyduck (@fuzzyduck) on CodePen
GSAP animation - detect a percentage of animation progress
in GSAP
Posted
Many thanks for getting back to me - The first option (the eventCallback) seems to work best, however I've updated the Pen to include the button which decreases the height - basically I need to warn the user when it gets to a certain percentage, the users clicks the 'empty button', the animation starts again and then I need to start the percentage detection process again.
Thanks again