Jump to content


Need bezier examples and some explanations.

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

I'm still rather confused about the whole story.
1. Can't find bezier examples.
2. Can't find comparative table between TweenLite, TweenMax, TimeLine Lite... what is what ?
3. What about GS vs Adobe Flash ? May I deinstall Flash and replace it with GreenSock ?
4. JS vs AS version (pros and cons).

Please help. Thanks.

Link to comment
Share on other sites



Well not the easiest questions because some of them will vary depending on user experience.


An awesome bezier example is the following:

See the Pen Krfod by GreenSock (@GreenSock) on CodePen


In my experience bezier is a practical learning, as you code and play with it you'll learn more and more of it.


TweenLite and TimelineLite are the more basic tools of the Greensock Animation Platform (GSAP). TweenLite gives you the chance to tween any numeric value you want, for example a numeric variable, but the most common scenario is use it with the CSS Plugin which allows you to pass through the constructor any CSS property; also with TweenLite you can pause(), reverse(), add callbacks and callbacks parameters to the tweens. TimelineLite allows you to sequence any Tween you want and use that timeline like an individual tween, but is a collection of tweens. For example the sequence you see in this link:


Is a collection of tweens (a bezier tween in there too) and once the timeline is over you can play it again, reverse, pause and restart (among others).


TweenMax and TimelineMax extend the abilities of the TweenLite and TimelineLIte. Also in the JS version TweenMax includes a series of plugins (CSS plugin, bezier plugin, roundprops plugin) and TimelineMax, so pretty much TweenMax is a very good compound for almost any of the basic animations.


Refer to the API reference to learn more:

TweenLite: http://api.greensock.com/js/com/greensock/TweenLite.html

TweenMax: http://api.greensock.com/js/com/greensock/TweenMax.html

TimelineLite: http://api.greensock.com/js/com/greensock/TimelineLite.html

TimelineMax: http://api.greensock.com/js/com/greensock/TimelineMax.html


This is the basic for starting with the JS platform:



The jumpstart is a very good reference:



And Carl created a great video to work with sequences:



In terms of Flash and GSAP JS, here's the thing is a little more complex. Happens that since 2011(if my memory doesn't betrayed me) Adobe stopped updating the Flash plugin for mobile devices (Phones and Tablets), so that pretty much transformed the web development scenario. In some cases some clients can't afford to create a cool animated site in flash for desktops and laptops(the good old way) and a site, coded completely different, for devices. Why I bring the code issue, because in the flash IDE, Flex or Flash builder (or the tool of your preference) you'll do it with AS2 or AS3, while the other site would be in javascript, that means double of time, cost and everything. With CSS3 and HTML5 and GSAP you can achieve a lot of stuff in ALMOST every browser for any device (MAC, Windows, Unix, IOS, Android). I'm pretty sure you catch the emphasized almost, one of the growing pains of this deal is the fact that there's still people using Windows with Internet Explorer 7 and 8; those browsers work in very particular ways and have some issues with some CSS3 transform properties, which makes the creation process a little more complicated, but like I said before, as you code you'll learn what works without any problems and what doesn't. The good thing is that of the major browsers, Chrome, Safari and Firefox are very good in terms of the features they support and for what I've read Internet Explorer 11 has made some very good advances in diminish the features gap. To answer your question directly it'll depend on what your scope of development; I haven't ruled out Flash, because once a client that had a Flash site was on board with paying for an update for the flash site and building an entirely different site for devices. For example people that work in games are still using the flash version of the engine, and the Actionscript forum is very active so that gives you an idea of how much the flash version is still used.


Finally in terms of JS vs AS this goes along with the previous answer. In AS you don't have to worry about the visitor's browser while in JS you have to consider it, but there are some very good tools in helping with this, but with AS you can't reach the devices market completely.


Basically this is something you have to ponder in every development you make and inform your clients about all the possibilities.


Hope this helps,



  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Bonaca, if you've got any other specific questions, please don't hesitate to ask here. If things still aren't clear after going through the Jump Start, reading the "Getting Started" article, and looking over the docs, and maybe even watching Carl's video, I'd definitely want to know where we can shore things up and make it easier for folks like yourself to get the info they're after. 

Link to comment
Share on other sites

I have been looking at the examples above but I am having some problems reformatting the code for my needs. 

I am looking to create a bezier curve and then give dot elements a percentage positioning on the curve. Possibly animating to that position, but either way, stopping at a certain point.

Rather than having 300+ elements being placed using an XY coordinate, I would just have a 1-100% value for where it sits on the bezier curve. 

Any thoughts are extremely appreciated!

Link to comment
Share on other sites


You could try using the engine's progress() method.

Since you talk of a lot of elements, you can create the bezier path as an object and create a function to create the tweens or to add them to a parent timeline. The challenge comes on which tweens you want to stop before the path's end and where you want them to stop in the path.

Maybe you could set up a fiddle or codepen in order to see with more detail what you're trying to achieve.

Hope this helps

Link to comment
Share on other sites

Yes, Rodrigo is right. You can create multiple objects that each have their own tween that moves them along the path. Then you tween the progress of those tweens so that they each stop at a certain point.


Take a look at this for some inspiration: http://codepen.io/GreenSock/pen/zcmpo

  • Like 3
Link to comment
Share on other sites

Great sample Carl!!


Is going to the playground for further experimentation  ;)



Link to comment
Share on other sites

Yes, Rodrigo is right. You can create multiple objects that each have their own tween that moves them along the path. Then you tween the progress of those tweens so that they each stop at a certain point.


Take a look at this for some inspiration: 

See the Pen zcmpo by GreenSock (@GreenSock) on CodePen


Thanks, Carl and Rodrigo, for the quick responses and great example! It worked perfectly for how I needed it!

Link to comment
Share on other sites

Thought I'd add that if you're adding dots to a circle or arc, you could use the same transformOrigin on all the dots, and then place them using rotation. You can apply inverse rotation on any dot contents, like text, to keep it level. Very simple, but often we over complicate things that may appear more complex at first glance.

  • Like 1
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.