Search the Community

Thank you for reviewing my issue. I can make CustomBounce and MotionPathPlugin work together to a degree, but I can't produce my desired results. You'll understand if you go the codepen linked here - or view its many forked cousins online. I also joined Creative Coding Club for the additional resources. It's been great, and the lessons on SVG animation gave me some instruction that helps. But, alas, I cannot produce the results I need to produce. To be fair, Carl uses an older version of the Custom Ease visualizer in the videos, which does throw me. The GUI is different. My output is not comparable to the output he receives. In this animation, I need much better control over squash and strength - enough to bring 2-3 seconds of levity to an otherwise simple handwriting animation. In simplest terms... What's the best way to combine the functionality of both plugins to control the reactions (especially squash) when the falling circle ("#dot") collides with a letter in the company name or "Splash"? For the visual context, I have provided the Codepen link to the latest attempt. There are many iterations and weeks of effort. For those who want more detail: The small ball drops from above and bounces two-three times between the letters in the company's name. In some versions, it swoops down and gains momentum as it sweeps through the inner curvature in the cursive letter L (id=#Lpath"). It makes sense given the font I've chosen. The animation does not need to adhere strictly to the principles of physics, but it does need to retain some semblance of realism. The purpose is to provide 2-3 seconds of levity to an otherwise simple handwriting animation. In the end, the ball drops one step and dribbles to the slogan "Coding & Design," where it morphs into the dot above the letter i. I can handle that part - the ending. Here are the biggest issues, again placed in the simplest terms : 1) The ball always returns to the origin point, regardless of what I do (transformOrigin: "center center", endAtStart: fase, yoyo:false, or repeat = 0, etc...). I cannot resolve this issue for the life of me. The dot returns with the homing instincts of a carrier pigeon to its starting point. 2) Squash does not work for me. It hates me. The bounce effect works okay, but I cannot make the "squash-bounce" effect work for me when the dot collides with a letter. Adding squash can cause the animation to freak completely. I don't get it. 3) Timing is the big issue in a nutshell. I need the effects to hapen they should happen. Then, I need the dot to return to its original shape in between collisions. I have the same problems when I've added HTML paths and referenced them by id, and when I've not added any additional HTML. It seems like an important, but I still can't get where I need to go. I've come to Wit's End. I'm almost there. It's starting to feel like home. Please help if you can. I'm very grateful for any assistance. Robert