Jump to content

Search the Community

Showing results for tags 'cubic-bezier'.

  • 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 3 results

  1. Hi GSAP Team & Contributors, I've had hard times to make "1D cubic path" working. According to the following codepen, simply extracting the y property of a working curve data doesn't produce the same tween : let points = [{x:0,y:0},{x:50,y:0},{x:100,y:50},{x:100,y:100}]; // Reference Y let yValues= [{y:0} ,{y:0} ,{y:50} ,{y:100}]; // Not the same tween/smoothing GreenBall is 2D cubic path, as BlueRect is 1D cubic path using the same values https://codepen.io/swingingTom/pen/qBPBQQP A workaround a could have imagine is to tween another fake property in order to have a two-dimensional properties let points = [{x:0,y:0} ,{x:50,y:0} ,{x:100,y:50} ,{x:100,y:100}]; // Reference Y let yValues= [{y:0,foo:0},{y:0,foo:50},{y:50,foo:100},{y:100,foo:100}]; // Not the same tween/smoothing But according to this codepen, it won't work : https://codepen.io/swingingTom/pen/NWaWOXX I start to believe that `type:cubic` require both `x` and `y` property to produce the cubic smoothing. For now, my only working workaround is to animate a proxy target, that only reports "y" property on the real target to be animated. https://codepen.io/swingingTom/pen/GRMRYav gsap.to(proxyTarget, { duration: 3, ease: "none", repeat: -1, yoyo: true, motionPath: { path: cubicPoints2D, type: "cubic" }, onUpdate: function () { gsap.set(realDisplayTarget, { y: proxyY.y }); } }), I know that looks more like I should use CustomEase for the prodived cases, but I would like to know better the cubic motionpath features and its limitations.
  2. GreenSock


    CSS animations and WAAPI offer cubic-bezier() which is great but with only two control points it's impossible to create more complex effects like bouncing, elastic, wiggles, rough/jerky eases, etc. Plus you can't make an ease return to its starting values (like a ball jumping into the air and falling back to the ground with a bounce). Features Unlimited anchors and control points. Copy/Paste any SVG <path> (including directly from Adobe Illustrator). Use CSS cubic-bezier() values (For example, from cubic-bezier.com). Editor has snapping, undo, sample code and other conveniences. Start with any standard ease and customize it. getSVGData() method turns any ease into SVG <path> data for display at the size you define. Extremely optimized for runtime performance. Free for anyone with a GreenSock account. Reading Ease Curves, Editing, and Using CustomEase Here's an in-depth video tour that'll get you up to speed with exactly how to use CustomEase (note that the video is using GSAP 2 format): Ready to play? Check out the new Ease Visualizer with CustomEase support. Edit the curve as much as you want: Download CustomEase Get CustomEase by creating a FREE GreenSock account which gets you access to our community forums plus you’ll receive our exclusive “GreenSock Insider” email series (you can unsubscribe anytime). Make sure you're logged in, then you’ll get immediately gain access to the download zip containing CustomEase. Note: CustomEase is not in the GitHub repository or CDN; it's only available for download at GreenSock.com. Download GSAP (ZIP) Demos CustomEase Demos
  3. In a project I'm doing, I need to match easing feel of elements animated using CSS cubic-Bezier timing function (example:cubic-bezier(0.1, 0.9, 0.2, 1) using tweenmax. Is this supported in GSAP ? I'm trying to avoid writing my own cubic-Bezier plugin if possible Thanks! Orry