cooganb

Beautiful! Thank you, sir. Works like a charm ?‍♂️

@OSUblake Apologies for the busy code, so the line in question is line 35 in the JS, in the `hide()` function: .from(fin, {duration: 1, transformOrigin: "100% 90%", x: '+=300px', y: '-=5px', rotation: -130},'start') I was hoping that by giving it a label it would start with the line above, but when the animation starts, the fin is at its original position then switches over to the .from position. I just tried running set, but it still had the fin in the original position before going to the set position. If you think it's a matter of having a cleaner timeline, I'm happy to try that.

hi there! I know this is a newbie question, but I'm totally stuck. I'm working on a basic animation and I can't get the object I'm animating to start at the .from location, rather it jumps there and then starts the animation. I tried using labels to make them start at the same time, but it's still jumping. Any ideas? Thank you so much in advance!

@ZachSaucier @PointC Apologies for not responding sooner! Thank you for both these responses, I'll check out the demo!

Thanks for this, @mikel ! I wasn't sure about `end`, so thank you for sharing that. Is that the best way to dictate starting or finishing position? And when using `from()`, for example, everything appears on the path coordinates. The object doesn't retain any of its original x,y values?

Hi there! I've been wanting to dig into MotionPathPlugin for a while but just getting a chance to now. I have a question on positioning: As you can hopefully see in the example, I have a series of circles positioned along a path. I'd love to animate each circle start at the beginning of the path to go to their original position on the path while following the path. Is this possible? Thanks for the help!

Perfect! @ZachSaucier you all are amazing! Thank you.

@ZachSaucier One more quick question! Any idea as to why the function is only working for the first ellipse and not the later ones? https://codepen.io/cooganb/pen/WNNMdrb

Thank you so muucchhh!!

Hi there! I've been trying to follow the "Writing Smarter Animation Code" article. This includes compacting animations into functions, which can then be imported into a master timeline. I'm having some trouble with using DOM element manipulation in the functions. The function in the above example fails when I try to run it, saying `vars` using .GetDocumentById has not been assigned. However, when the logic is moved from function to the body of the JS doc, the animation works (which you can see commented out in the Codepen). Any advice from folks? Thanks in advance!

How could I gauge performance on the browser? I'm on Chrome

Ah, it's a homemade slide feature from view where there's a slide counter that goes up as the right key gets pressed. Will try to mock something up! AFK right now.

Quick follow-up, @ZachSaucier: I've been able to embed the SVG and inject the JS file which allows the SVG to be animated. However, the website is a series of slides, the SVG in question being a slide or two from the beginning. It seems as though when I press the key to change the slide, the SVG freezes in its animation. Any idea what's going on?

@PointC and @GreenSock Worked like a charm! Thanks for all your help!

Thank you so much @ZachSaucier! I really appreciate the help.