Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'curve'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 7 results

  1. Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind: At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc. The problem with this approach is that I have to set `position: absolute` to each character. As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc. So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve. What do you think? Any pointer would be highly appreciated.
  2. Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. Define the path using an SVG <path> or an Array of points. The magical "align" feature bends coordinate systems and really sets it apart. You can even edit the path in-browser using MotionPathHelper! Video Feature highlights Magical align capabilities that bend coordinate systems in order to position the target exactly on top of the path (or move the path to the target), regardless of how deeply nested they are inside different transformed containers! This is insanely convenient and no other tool on the web offers this functionality! autoRotate makes the target rotate automatically in the direction of the path as it moves. Define specific start and/or end positions on the path (progress values from 0-1). Even wrap around or go backwards! A separate MotionPathHelper tool for Club GreenSock members enables interactive editing of the path directly in the browser! No need to supply an SVG path - you can provide raw coordinates through which to plot a curved path, complete with adjustable curviness, or if your Array has cubic bezier coordinates just set type: "cubic". You can even have a path go through non-positional properties like scale, rotation, or ANYTHING! That will basically smooth out the velocity changes as it hits each value, like: [{scale:0.5, rotation:10}, {scale:1, rotation:-10}, {scale:0.8, rotation:3}]. Loads of helper methods for doing advanced things like: Convert native SVG shapes like <circle>, <rect>, etc. into an equivalent <path> (convertToPath()) Calculate the relative position data between any two DOM elements so that you can move one to align perfectly with another, even if they're inside different containers that have various transforms applied! (getRelativePosition()) Convert SVG <path> data into raw cubic bezier data/numbers (or the other way around) (stringToRawPath()/rawPathToString()) Get matrix data for converting between coordinate spaces (convertCoordinates() / getGlobalMatrix() / getAlignMatrix()) Check out the MotionPathPlugin Demos collection on CodePen! Demo Sample code gsap.to("#div", { motionPath: { path: "#path", align: "#path", alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 5, ease: "power1.inOut" }); Usage details (docs) Check out the MotionPathPlugin docs for all the details. How do I get it? MotionPathPlugin is included in the free download, so it's available via the CDN, Github, NPM, and Yarn too! See the installation page for all the options. MotionPathHelper (which lets you live-edit the path inside the browser) is a members-only benefit of Club GreenSock. If you're not a member yet, animation superpowers await! Demos MotionPath Showcase MotionPath How-To Demos
  3. GreenSock


    Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the control points. The target's current/starting values are used as the initial anchor. You can define a curviness special property that allows you to adjust the tension on the Bezier where 0 has no curviness (straight lines), 1 is normal curviness, 2 is twice the normal curviness, etc. Since "thru" is the default Bezier type, you don't need to define a type at all if this is the one you want. "soft" - the values that you provide in the array act almost like magnets that attract the curve towards them, but the Bezier doesn't typically travel through them. They are treated as control points on a Quadratic Bezier and the plugin creates the necessary intermediate anchors. The target's current/starting values are used as the initial anchor. "quadratic" - allows you to define standard Quadratic Bezier data (Quadratic Beziers have 1 control point between each anchor). The array should start with the first anchor, then control point, then anchor, control point, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. "cubic" - allows you to define standard Cubic Bezier data (Cubic Beziers have 2 control points between each anchor). The array should start with the first anchor, then 2 control points, then anchor, 2 control points, anchor, etc. for as many iterations as you want, but obviously make sure that it starts and ends with anchors. For full details please consult the BezierPlugin documentation.
  4. Hi, i'm trying to get tweenmax bezier tween fit with a canvas quadraticCurve. The canvas QuadraticCurve is supposed to draw the trajectory of a tweening object. That curve datas are given by BezierPlugin.bezierThrough So far, start and end point seems to fit, but the canvas bezier curve middle point is higher than the tween bezier curve. Could please someone help me understand what i'm doing wrong?
  5. I have a project that requires a transitional effect. I need to code ooze expanding from the top of the screen to the bottom, creating a complete wipe. The arcs/drips need to move as realistic as possible resembling a fluid sliding down your screen. This is the closest I could find to the effect I need to create. http://codepen.io/rkgttr/pen/doLKGO Except for it is just one oozing line instead of the loop, and it needs to reach the bottom instead of fading out. So here is my problem. I need to do this with GSAP and I don't know how to create those curves. I want to be able to control the arcs opposed to just using an image, to make it look like some kind of liquid. I thought about creating a cluster of dots and just animating their shadows but that wouldn't work with the concave parts. Is there a way to draw something on a bezier curve and control it? If yes how do I do that? Or do I need to work with co sin to make sine waves? https://jsfiddle.net/umaar/fWSUk/ Do I need to whip out the quadratic formula to achieve this look? I am a front-end coder and this is a whole new level of brain power for me. I might be overthinking this. Thanks for any help.
  6. Is there a method of getting the same functionality of the BezierPlugin, without curves? The functionality is perfect, I just want perfectly straight lines without the curves. The codepen shows an example with the BezierPlugin, and another example (without GSAP) that plots just the lines. Thanks!
  7. How can I generate complex bezier curve points that follow a graphical path? I have tested the BezierPlugin demo SWF and it will work great for my project but I'm stuck calculating the points that match the image provided by the designer. I need to animate a div with an image background that tracks the graphical path. Will Photoshop, Illustrator, or Flash calculate the points from a graphic that can be used? Is there are third party tool? Attached is a graphical example for reference. Thanks in advance for your help.