Jump to content
Search Community

Animate object along the path with bezier plugin

murtazamalek test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hello, 

 

What an awesome animation library I must say. I am trying to work on some animation but having a hard time understanding the concept of bezier plugin. Please check the attached CodePen. 

 

What I want to do is, on the page load I want to animate all 5 links from the center of the screen to the left, which is a virtual arc and then I want to animate the links one by one along the arc path. Right now you will notice the links are animating but they are directly animating to the end position, whereas I want the links to reach their destination along the arc path. 

 

I tried using the bezier plugin "thru", "quadratic" and "cubic" types but none of them worked as expected. I am 100% sure I am missing something and so any help on this would be greatly appreciated. 

 

FYI: This animation library is so cool, it's net letting me sleep ;) 

 

Thanks.

See the Pen wWvoOr by murtazamalek (@murtazamalek) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Great to hear you are having so much fun. 

 

Thanks for the demo it helps give an idea of what you want to do.

Not sure where or how you were using a Bezier tween, but here is a basic example:

 

http://codepen.io/GreenSock/pen/oLNBgb?editors=0010

 

Diaco, provided this demo of generating a circular path:

http://codepen.io/MAW/pen/bdOJmz

 

 

ultimately, you would want to generate a Bezier path for a circle, and then animate each object along a certain distance of that path. This can be accomplished by tweening the progress() of each tween. I describe the general process here with a demo:

http://greensock.com/forums/topic/14426-a-way-to-set-movefrom-and-moveto-positions-in-bezierplugin/?hl=bezier#entry61409

 

It's a pretty ambitious undertaking if you are just starting out but hopefully the concepts in those demos can help.

 

If you want to use an SVG as a path, you can look into our MorphSVG plugin which accommodates this:

http://greensock.com/morphSVG

http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

  • Like 3
Link to comment
Share on other sites

Hi Carl, 

 

Thanks for the quick reply. I had already checked multiple examples of bezier plugin animating the objects on X and Y axis. The challenge in my case is, I am able to get the correct positions for the object to animate to, but the objects are already animated once from the center to the left and so setting up values in the bezier parameter doesn't work correctly. See the difference between the initial and the new CodePen URL to get more details about how I am trying to animate the object. 

 

Initial: 

Updated: 

See the Pen NrWdrz by murtazamalek (@murtazamalek) on CodePen

 

For me, the end goal is to animate the links in that circular path but instead of linear animation, I want to move the object on circular path as well. Hope this all makes sense. 

 

Thanks. 

Link to comment
Share on other sites

it's getting a little clearer but I think the issue is that you have to generate the anchor and control points for the entire path. It seems you are just generating the end position. 

 

From what I understand, your entire path should look like this:

 

0dd4143e9f8f4fadaa7408c561de2002.png

 

Generating those points "by hand" or via a formula will most likely be a bit of an undertaking. 

 

Here is another demo that shows you can have 2 regular tweens that move left then down and then a bezier tween that follows. 

 

http://codepen.io/GreenSock/pen/QEWdmY?editors=0010

 

This is just to show that if you want you could move your items from center, to left and then around the circle.

 

It seems the only missing piece is generating the anchor and control points for the circular motion. 

And again, that's the tricky part and not something I can do quickly. 

  • Like 1
Link to comment
Share on other sites

  • Solution

By the way, you don't necessarily need to use a Bezier to do this. If you just want a circular movement, you could use plain trigonometry math inside an onUpdate to apply things. Here's a fork of your demo that uses x/y transforms to do the positioning so that everything stays responsive too (resize the screen and things are still centered whereas in your other version, you were hard-coding values on "top" and "left" that would cause things to get out of whack when the window is resized): http://codepen.io/anon/pen/WxNZXO?editors=0010

 

I also removed the jQuery dependency. 

 

Is that what you're looking for? 

var radius = 200,
    items = document.querySelectorAll("nav .nav-item"),
    navTl = new TimelineMax(),
    spacing = Math.PI / (items.length - 1),
    i = items.length;

navTl.staggerFromTo(items, 0.5, {scale: 0.5}, {
  x: -radius,
  scale: 1,
  opacity: 1,
  ease: Linear.easeNone,
}, 0.5);

while (--i > -1) {
  items[i].angle = Math.PI; //fabricating a custom "angle" property that we'll tween.
  navTl.fromTo(items[i], 0.5, {
    scale: 0.1
  }, {
    angle: i * spacing + Math.PI,
    css: {scale: 1, opacity: 1},
    ease: Linear.easeNone,
    onUpdate:applyAngle
  });
}
function applyAngle() {
  TweenLite.set(this.target, {
    x: radius * Math.cos(this.target.angle),
    y: radius * Math.sin(this.target.angle)
  });
}
  • Like 2
Link to comment
Share on other sites

WOW. Exactly what I was trying to achieve. It seems I was doing it the hard way. I was able to achieve 80% but by doing manual calculations of top/left and was running into the responsive issue. The solution you provided solved both of the problems at the same time and in with just a few lines of code. 

 

Also, I wasn't aware of that we can use the onUpdate function and can use the SET function to update the values. A lot for me to learn :)

 

Kudos to the awesome animation library and such an awesome and active community forum. 

 

Thanks.

  • 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.
×
×
  • Create New...