Search the Community
Showing results for tags 'bezier path'.
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. We recommend using GSAP 3's motionPath instead of the approach outlined here. Please see the GSAP 3 release notes for details. GSAP's BezierPlugin enables you to animate any object along a complex bezier curve. However, it isn't simple for most people to generate the exact coordinates of all the anchor and control points needed to describe a Cubic or Quadratic bezier curve. MorphSVGPlugin to the rescue MorphSVGPlugin's main responsibility is morphing SVG paths and in order to do that, it converts SVG path data internally into bezier curves. We thought it would be convenient to allow users to tap into that functionality. MorphSVGPlugin.pathDataToBezier() converts SVG <path> data into an array of cubic Bezier points that can be fed into a BezierPlugin tween (basically using it as a motion guide)! Watch the video Demo Aren't there other tools that do this? Sure, you could find some github repos or dusty old WordPress blogs that have some tools that move objects along a path. The problem is, what do you do when you need to incorporate one of these animations with other effects? Before long you're loading 5 different tools from different developers and none of the tools can "talk to each other". Choreographing a complex animation becomes a nightmare. What happens when you need to pause or reverse an animation from one of these "free" tools? Chances are you'll be spending dozens of hours trying to make it all work. With GSAP, all our plugins work seamlessly together. Any animation you create using any plugin can be synchronized with hundreds of others. Suppose your client comes to you with a small project with the following requirements: Morph a hippo into an elephant Progressively reveal a curved path Animate the elephant along the path Display captions for each animation Make sure you can play, pause, and reverse the entire sequence Sounds silly, but something like this should be a breeze. How many hours are you going to spend just looking for the tools you need? With GSAP you can build it all in under an hour, with less than a dozen lines of code. See the Pen Sequence of Bonus Plugins by GreenSock (@GreenSock) on CodePen. The demo above uses MorphSVG, DrawSVG and ScrambleText which are available to Club GreenSock members. For more information check out the many benefits of joining Club GreenSock.
Hello, I found out about Greensock some days ago and immediately started using it. I think is really cool but I have some issues with some specific tasks. I am trying to: - Draw an svg line in portions as you scroll. (using also scrollmagic here) - Have a circle that will follow the svg line as it draws. (If I manage to do this, then I want multiple circles in a group follow the line as it's being drawn). From my codepen you will see not a perfect way to draw the line which I think I can make it better but my main issue is with the circle follow the svg. As a first step, I am just trying to follow the SVG (not the line as it's being drawn) but using the MorphSVGPlugin.pathDataToBezier to get the path of the svg, the return path does not really follow the svg. I think maybe my SVG needs more points so that the bezier path is more accurate but I am not sure if this is the case here. Also I would like to know for ideas if I am thinking this solution completely wrong and there is an easier way to accomplish what I need. Thank you,