timeline - animate along path

[struthyBhoy 4 Likes (Newbie)]

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.

 

Note: 

.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

[Carl 9,066 Likes (Superhero)]

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});

 

 

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

 

 

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

[struthyBhoy 4 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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

http://codepen.io/GreenSock/pen/eBRKNa

[struthyBhoy 4 Likes (Newbie)]

Ah - thanks so much for your help.

[struthyBhoy 4 Likes (Newbie)]

Hi,

 

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.

[Dipscom 2,815 Likes (Superhero)]

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.

[struthyBhoy 4 Likes (Newbie)]

Thanks, and of course whenever suites you.

 

And Happy Thanksgiving

[Dipscom 2,815 Likes (Superhero)]

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

[struthyBhoy 4 Likes (Newbie)]

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

 

Appreciated.

[struthyBhoy 4 Likes (Newbie)]

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, {
    bezier:{
      values:_path,
      type:"cubic"
    },
    ease:Linear.easeNone,
    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. 

 

[Dipscom 2,815 Likes (Superhero)]

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.

[struthyBhoy 4 Likes (Newbie)]

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