Jump to content


Need help with bezier animation.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Could someone help me to create a bezier animation like this

I tried with this:

TweenMax.to(moon, 10, {bezier:{type:"soft", values:[{x:100, y:100}, {x:200, y:100}, {x:100, y:311}], autoRotate:true}});


- I cannot adjust the path identically

- I tried with plugin-explorer - there is no js code, just as. I tried that code - without success

- The moon needs to be scaling 200% from start to the end point

- z-index should be higher at the and.

- How to adjust the pause between two sessions ?


Any help, pls.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


I didn't have a lot of time to finesse the animation but give this a look:




//create a TimelineMax with repeat and repeatDelay
var tl = new TimelineMax({repeat:4, repeatDelay:2});

//add bezier tween
tl.to("#moon", 4, {bezier:{type:"soft", values:[{x:570, y:100, rotation:100, scale:1.5}, {x:-150, y:311, rotation:200, scale:2}], timeResolution:10}, ease:Linear.easeNone});

//change the z-index of moon
tl.set("#moon", {zIndex:3}, 1.5);


live preview:

See the Pen 696ce9aec72beabca04bff816c81936f by GreenSock (@GreenSock) on CodePen



This example uses TimelineMax to sequence the changing of the z-index and to allow the animation to repeat with a delay.

  • Like 2
Link to comment
Share on other sites

Hi, Carl


first - thanks a lot for your time and for your welcome. Your solution is ... - perfect !

second - must say - I still can't believe that this (free) technology exists at all !

I'm sure - this is the future of coding digital animations.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.