en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en de en es en en en en en en en hu en nl en de en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
I have an element (a pony) that moves along a random path, flips and returns. I would like to recalculate that path each time the pony returns. I tried to work with vars.motionPath.path, but the new path isn't applied to the tween ... (see my comments in the code)
I there another way to update the path on the fly?
See the Pen eYMBLqz by rob83 (@rob83) on CodePen
I'd probably do something like this?
See the Pen RwMoEbp?editors=0010 by GreenSock (@GreenSock) on CodePen
You'll have to add a bit of conditional logic to flip the pony and change direction, but creating a new tween each time rather than trying to update the original tween is probably a better (easier) route.
Alternatively - maybe the modifiers plugin could help? I haven't messed about with it much but modifying existing properties is what it's for!
Share on other sites
robs    9 Likes (Newbie)
I'll have a look at the ModifiersPlugin, but I guess I'll just go with the solution of creating a new tween each time.
Share on other sites
GreenSock    17,226 Likes (Superhero)
Cassie's approach is solid. If you really need to reuse the same tween instance(s), you could invalidate() to force them to re-parse the vars on the next render. Just beware that if the parent timeline's playhead is passed the tween's end, it'll of course call the onComplete again on the very next tick after invalidating, thus you'd need to add some logic to skip things in that scenario. Here's a fork illustrating what I mean:
See the Pen QWmdLVE?editors=0010 by GreenSock (@GreenSock) on CodePen
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
MotionPathPlugin — Reset path onRepeat
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.