Search the Community
Showing results for tags 'hover effects'.
Like all new members to the forum, I've found an effect that I'm hoping can be achieved with GSAP. https://www.craftedbygc.com/ A sort of abstract-like liquid flow. I'd love to mask it behind an SVG logo. https://peeke.nl/simulating-blobs-of-fluid But like all first posts in this forum - I have absolutely 0 idea where to start. Any pointers would be amazing! Thank you community ❤️
TimelineMax and Bezier plugin have such amazing possibilities, but I am a bit stuck with a few things I don't understand. On this example, The things that don't make sense to me. 1) I did not know how to determine the starting point for the bezier circle. By default, it was starting in the bottom left, and so I rotated the entire svg, and then rotated negatively the play arrow to get it back to a normal starting point. This hack is fine but I am almost 100% sure it is going to cause me issues and may already be. Is there a way to determine the beginning of a bezier curve that allows me to place the object I am rotating around it at a particular starting point? 2) The animation works great if I use TweenMax and just animate it like a normal tween. But when i create it as a TimelineMax animation that occurs on hover it starts way off the bezier curve, I'm assuming it is where it should have started in the first place before i rotated it and all of that. Once you hover over it, it jumps right on the path. Is there a way to snap it to its starting point while TimelineMax is paused? This may be the same question as 1... 3) Is there a way, besides breaking it in 2 bezier curves to have the hover animation stop in the middle of its bezier curve trip? I would prefer to have the animation pause in the middle and then on mouseout, complete the rest of the animation. But I don't see a way to have a bezier animation stop before it gets to the end. Any thoughts would be appreciated!