wcomp
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by wcomp
-
-
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!
-
1
-
-
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:
See the Pen bOQBzZ?editors=0110 by Wcomp (@Wcomp) on CodePen
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!
See the Pen bOQBzZ?editors=0110 by Wcomp (@Wcomp) on CodePen
-
5 hours ago, GreenSock said:
I think you're just targeting the wrong thing. You're morphing cpsource's "d" to cpsource2...but remember that cpsource is still the element that's used as a clipping path (all you did was update the "d" values). So when you morph cpsource2's "d" attribute to be cpsource2big, GSAP does exactly what you ask, but that has no effect on things visually because your clip-path is still pointing to cpsource (the other element). Maybe you just need to change the target of that tween from cpsource2 to cpsource.
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!
-
On 12/31/2018 at 10:57 AM, GreenSock said:
That actually has to do with the fact that the browser will always report the current (computed) values in px, so that's what the "from" value will be recorded as. Thus, when you reverse(), it'll end at that "from" (px) value. One way around that is to define it as a fromTo() tween so that you have control over that "from" value, like this:
See the Pen 277ea0198fe8acbfb0ba79752472df18 by GreenSock (@GreenSock) on CodePen
That works great. Thanks for your help! Good to know that about fromTo().
-
2
-
-
On 12/31/2018 at 4:50 AM, mikel said:
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!
-
18 minutes ago, Jonathan said:
Hello @wcomp and welcome to the GreenSock Forum!
It looks like this is happening due to the something in the SVG Markup. I could only see this in Chrome, but not Firefox on Windows 10.
I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool.
https://jakearchibald.github.io/svgomg/
I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG.
You can see below when tested in a webkit browser that you do not see the border after animating. The border was being caused by some coordinates that were causing an overflow of your path.
You can see in this below codepen that it no longer has that red border on the outside parts of the SVG.
See the Pen oJXYGQ?editors=1100 by jonathan (@jonathan) on CodePen
Does that help?
SVG resources:
- https://greensock.com/svg-tips
Happy Tweening!
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!
-
2
-
-
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:
See the Pen aPOZGo?editors=1100 by Wcomp (@Wcomp) on CodePen
Bending object as its animated along bezier path?
in GSAP
Posted
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!