Jump to content

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

timeline - animate along path

Recommended Posts

Hi there,


I am quite new to Gsap, I purchased the dev licence - its been great. 


I have stumble onto a bit of a problem though.


I am trying to create a timeline which triggers animations along a path.



.to("#circle", 20, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone, repeat:-1})

works on my local machine, but 

.to("#circle-2", 20, {bezier:{values:pathTwo, type:"cubic"}, delay: -21, ease:Linear.easeNone, repeat:-1});

does not work

See the Pen Mboojj by struthy (@struthy) on CodePen

Link to comment
Share on other sites

Thanks for the demo.


If you check the console you will see that there is an error about path is not defined.


I'm not sure what the intention is, but either you can


define path properly (that var does not exist in your codepen)


or use pathTwo like:


.to("#circle", 20, {bezier:{values:pathTwo, type:"cubic"}, ease:Linear.easeNone, repeat:-1})
      .to("#circle-2", 20, {bezier:{values:pathTwo, type:"cubic"}, delay: -21, ease:Linear.easeNone, repeat:-1});
I'm not sure if the negative delay is a typo, but I'm not sure what you intend for that to do. To change the start times of tweens in a timeline it is best to use the position parameter: http://greensock.com/position-parameter
  • Like 2
Link to comment
Share on other sites

Hi there - thanks for the reply.


I have edited my original pen. The console errors have gone. But it is still not doing what I would like it to do.


There are two circles that I would like to animate along separate paths Only the first circle (id="circle") is being animated just now.


Help appreciated.

Link to comment
Share on other sites

looks like there are 2 main issues


1: you weren't targeting the second circle properly. In the SVG it had an id of "circle-2" but in your GSAP code you were using an id of "circle2"

2: your first tween had a repeat of -1 (infinite) which means the second path tween wouldn't run until it was finished, which would be never. 


I did a quick edit just to show you that it both tweens can work when they start at the same time


  • Like 3
Link to comment
Share on other sites



Thanks again for all your help. I have been playing with the code a bit more to get a series of looping animations happening at various times. I forked the original codepen here 

See the Pen QGgRzR by struthy (@struthy) on CodePen


I have a feeling My code is very convoluted. Can someone with a bit more experience show me how to do this more eloquently.


Thanks in advance.

Link to comment
Share on other sites

Hi struthyBhoy,


I'm not near my computer but will be happy to have a crack at it later on if you are OK with it being a few hours from now.


It's Thanksgiving weekend in the USA (for the non USA centric people) so, some of others might not be around as much.


Having said that, who knows, someone might beat me to it. :)

  • Like 1
Link to comment
Share on other sites

Thanks, and of course whenever suites you.


And Happy Thanksgiving :)

Link to comment
Share on other sites

Here you go. Don't take it as gospel - except for the rules, they're pretty much rock solid and you'll be a better coder by following them. I didn't come up with them, I am just a follower.


This is not the one and only way of achieving, it's just how I'd do it. Have a look, compare with your version it should make sense.


See the Pen NbvWqZ by dipscom (@dipscom) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks for this. I am comparing just now - and learning.


Appreciated. :)

Link to comment
Share on other sites

Hi Dipscom,


Can I ask you a couple of questions about the code. No rush or worries if you cant spare the time. There is a lot of new stuff for me that i don't quite understand. I don't understand the (element, _path) below.

function circlePath(element, _path) {
  return TweenMax.to(element, 20, {
    repeat: -1

and I don't understand "MoveCircles" bit below

add(circlePath("#circle", path), "MoveCircles")

To be honest it all looks like magic to me. 


Link to comment
Share on other sites

OSUblake will be so proud of me once he sees my reply to your question. As I was asking the very same thing not too long ago. It was all witchcraft for me too, some of it still is...


Here we have a function that takes two arguments: element and _path

function circlePath(element, _path) {

Element and _path are the names I chose. It could be anything but it's better to have them make sense. Element should be pretty straightforward, it's the element you're targeting, and _path was meant to avoid confusion with the SVG's path. Because you are using path and pathTwo on your pen as variables already.


The "MoveCircles" in here:

.add(circlePath("#circle", path), "MoveCircles")

Is the position parameter being used as a label. Check a detailed explanation by Carl. It makes sure all the methods that have "MoveCircles" start at the exact same point in time.

  • Like 3
Link to comment
Share on other sites

Thank you, much appreciated. The label stuff is awesome - I never realized that you could do that.  :)

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.