wcomp

Thanks! Those codepens look amazing. Some great ideas. I managed to get it working using an extremely tedious process of creating nearly 40 different paths using Inkscape's "patten along path" function (to use like animation frames) and then morphing them using morphSVG plugin. It works but its not as precise as I had hoped. I'm thinking I'm gonna check out the sprite option. Thanks for the response!

Ok. This one is killing me. I've spent two days on it already. I think I just need to know more about nested timelines and labels. But here it is: -When the mouse pointer enters the "Hover Button" I'd like the playhead to play until 50% of the animation has completed, then stop. -If the mouse pointer leaves the "Hover Button" before the playhead reaches 50%, then the playhead should reverse, heading back towards the start of the timeline. -If the mouse pointer leaves the "Hover Button" after the playhead has reached 50%, the the playhead should reverse back to the 50% position, NOT all the way back to the start of the timeline. This much so far I've got, although I used two separate timelines back to back with a number of "if" statements using the progress() method to accomplish this. I'm sure there is a more elegant solution using only one timeline, I just can't seem to find it at the moment. The problems come when the timeline reaches 100%. -After the playhead reaches 100%, I need everything to reset back to it's initial state on load. So, in other words, after the playhead reaches 100%, it should snap back to the very start of the timeline and all of the above described behavior should repeat itself all over again. This is whats giving me trouble. I have tried using pause(0), seek(0), time(0). None of those seem to be resetting things without adding extra unwanted stuff to the hover behavior. By the way, when I say timeline here I am referring to the red line on the codepen demo. Not either of the two separate back to back timelines I used to get what I've got so far. Any ideas? This one is frying my brain. Lol. Thanks for any help! Here is the codepen:

Interesting. I was looking at Blender as a possible solution. I've almost got what I needed using the "Pattern along Path" effect in Inkscape and the MorphSVG plugin. Although I'm having some issues with odd morphing behavior. I'll probably post about that soon. Thanks!

Is there any way to "bend" an SVG object as its being animated along a bezier path using GSAP? Something like this: https://www.behance.net/gallery/49401667/Twisted-letters-2 (the one with the blue pencil). I have managed to get the red arrow to animate along the path but the shape stays the same the whole time. Id like for it to follow along the green path and bend as it goes around the curve so that at the end of the animation it has the shape of the purple arrow: Is this possible with GSAP? I have experimented with the autoRotate feature but don't think that is going to get me all the way to where I want to go. Plus the arrow flys off the screen instead of staying next to the green line: https://codepen.io/Wcomp/pen/BvGpoe?editors=0110 Appreciate any help!

I feel silly now. Lol. Thanks! I got it to work.

I have a div that activates a MorphSVG clip-path animation on hover by morphing #cpsource to #cpsource2 using this code: tl2.to("#cpsource", .3, {morphSVG: {shape:"#cpsource2", shapeIndex: 0}, ease:Linear.easeInOut}, 0); When you CLICK on the div, it animates its size to twice the width and twice the height. I would like to animate FROM #cpsourse2 to#cpsourse2big when the div is clicked and enlarged so that the enlarged state has its own unique clip-path. I attempted to do that by using: tl2num3.to("#cpsource2", .3, {morphSVG: {shape:"#cpsource2big", shapeIndex: 0}, ease:Linear.easeInOut}, 0); The hover animation in its enlarged state, however, does not seem to be picking up #cpsource2big. Instead it behaves as if the "d" attribute of #cpsourse2 hasn't been morphed at all. When viewing the "d" attribute of #cpsource2 using chrome's inspector, I can see that its values change to #cpsource2big on click like it should, but the hover animation in the enlarged state doesn't pick up on the fact that the "d" attribute of #cpsourse2 has now changed to that of #cpsource2big. What am I missing? I'm sure its really simple. Lol. Appreciate any help!

That works great. Thanks for your help! Good to know that about fromTo().

Hey! Thanks for the response. I see that your pen is behaving differently but I don't see the "resize event" in the code. Am I missing something? lol.

I have this simple little width property animation happening on hover over the parent div. That's working fine but as soon as you resize the codepen (or browser) window, the width property on the #box2 element fails to update. So after the hover animation, the width property always snaps back to it's value upon the last browser window refresh. When I remove the GSAP code, the #box2 element behaves as it should when the browser window is resized. Is there a way to fix this? So that it responds to the resize without having to refresh every time? I need to be able to use the vh and vw units. Below is the codepen so you can see the issue. Thanks for any help!

Yes! That does help. Thanks a bunch. I'm glad I know about that SVG Optimizer Clean Up Tool now. I'm using Inkscape and even when I save as an "Optimized SVG" there seems to be a lot of transforms going on that I don't yet fully understand. I figured the issue had something to do with the SVG code but that tool cleaned it right up. Thanks again!

Hello all! I love the GSAP very much and am most likely about to purchase a membership so I can use MorphSVG in my projects. However, as I was playing around with the plugin in codepen, I noticed this odd border around the outside of the SVG shape I'm morphing. What is causing this? I tried setting the stroke-width to zero and that did not work. I deleted the stroke-with property all together and that seemed to work but I lost my opacity settings. Anyone know what might be causing this issue? Thanks! codepen: https://codepen.io/Wcomp/pen/aPOZGo?editors=1100