Animating through a SVG path and make it responsive

[JaviTubert]

Hi all,

I'm new with GreenSock and quite happy with I've done until now with it!

 

I've to do a animation through a path. All seems right up to here.

But it needs to be responsive. I mean, as the path adapts to the width of the screen, the animation should also adapt.

Is it possible to do this with GS?

 

Any help will be really apreciated.

 

Thanks!

 

See the Pen LyOKNx#code-area by JaviTubert (@JaviTubert) on CodePen.

[PointC]

Hi @JaviTubert

 

Welcome to the forums and thank you for joining Club GreenSock. 

 

To make that whole animation responsive, all you need to do is put the animating circle inside the same SVG as the motion path. That way the whole SVG scales together. Here's a fork of your pen.

 

See the Pen xdpwMr by PointC (@PointC) on CodePen.

Hopefully that helps.

 

Happy tweening and welcome aboard.

[JaviTubert]

Thank you very much!! I really appreciate your help!!

 

Any idea why autoRotate property does not affect the target?

[Jonathan]

@JaviTubert your codepen is 404ing so it will be hard to test your code?

[JaviTubert]

upss! sorry.

here it is again

See the Pen YVYBRq by JaviTubert (@JaviTubert) on CodePen.

 

[PointC]

The autoRotate is just in the wrong spot. Please try this:

TweenMax.to('#abeja', 50, {bezier:{values:motionPath, type:"cubic", autoRotate:90}, ease:Linear.easeNone, repeat: -1 });

 

You'll probably also want to center your origin like this:

TweenMax.set("#abeja",{xPercent:-50, yPercent:-50, transformOrigin:"center center"});

 

Happy tweening.

[mikel]

Hey JaviTubert,

 

May be it is a little bit to late for your project
but I wanted to see the bee flying ...:

See the Pen OmoGVM by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

 

Manfred

 

P.S.: A question to the experts: Is it possible to speed up MAJA randomly for a random sequence?

 

 

[OSUblake]

What's MAJA?

 

You can change the speed of your path follower by tweening the timeScale of its animation.

 

Or do this...

 

See the Pen LGpzBo?editors=0010 by osublake (@osublake) on CodePen.

 

 

[PointC]

Blake - I don't mean to alarm you, but it appears someone has stolen the fighter jet from your demo and replaced it with a square. You may want to file an insurance claim. 

 

Manfred - I'm curious - what is MAJA?

[OSUblake]

That's the svg block trainer. The fighter jet is kept safely inside the pixi hanger, and only comes for special events, like right now...

 

See the Pen XXbLer by osublake (@osublake) on CodePen.

 

 

[mikel]

Hey Blake,

 

Bee MAJA is a star for kids in Germany.

 

I remember that fantastic pen now - hugged it when I saw it some times ago.

 

And I´ll try to decode and use the steps ...  I´ll come back in some days.

 

Super. Thanks. And best regards

Manfred

[PointC]

ohhhh.... it's the bee. I thought it was an acronym for something and couldn't figure out what that could mean.

[mikel]

Please don´t expect any sophisticated profound terms in my comments 

[mikel]

Hey,

 

It´s absolutely funny. Sure I have 'studied' the lines line by line, but ...

 

So I took the most easiest way: easing:

 

See the Pen YVObGZ by mikeK (@mikeK) on CodePen.

 

You could belief that is the real natural flight of a bee called MAJA.

 

Thanks all and good evening

Manfred

[OSUblake]

Oh yeah, that looks totally natural... if the bee is drunk. But an ease is a good idea. A motion path can actually be converted into ease, which is where I got the idea from.

 

And you don't have understand everything line by line. Just know that it works. But for something simpler, you can change the timeScale in the update callback. If it's moving up, decrease it, and if it's moving down, increase it.

 

See the Pen JNmpQE?editors=0010 by osublake (@osublake) on CodePen.

 

 

 

[JaviTubert]

This looks amazing OSUblake.

I'm glad this post motivates all of you to improve the code and keep learning all together.

[mikel]

Hi Blake,

 

Yesterday evening joining an old red wine - perfect for the back and force study of lines - I got it. Yep!

 

And a bloody fly triggered me for this exercise:

See the Pen aWQdLa by mikeK (@mikeK) on CodePen.

        
Thank you so much for an amusing and entertaining evening ...
Manfred

[PointC]

@mikel That gave me a good laugh. 

[dgu]

On 5/18/2017 at 3:48 PM, OSUblake said:

What's MAJA?

 

You can change the speed of your path follower by tweening the timeScale of its animation.

 

Or do this...

 

See the Pen LGpzBo?editors=0010 by osublake (@osublake) on CodePen.

 

 

Hello , i woud like to know , when based on this animation (very good) how to alter opacity of the moving object when it s based on svg???

[dgu]

@OSUblake i took your animation and replace it by svg element, witch work very well.i want to change the opacity of the moving element , but it does not work at all, may you help me?

[mikel]

Hi @dgu,

 

Welcome to GreenSock Forums.

 

I'm not sure what you mean: a general or dynamic change of opacity?

Here generally via CSS (line 24):

 

See the Pen jYyXZd by mikeK (@mikeK) on CodePen.

 

A CodePen of your case would be helpful ...

 

Happy tweening

Mikel

[dgu]

1 hour ago, mikel said:

Hi @dgu,

 

Welcome to GreenSock Forums.

 

I'm not sure what you mean: a general or dynamic change of opacity?

Here generally via CSS (line 24):

 

See the Pen jYyXZd by mikeK (@mikeK) on CodePen.

 

A CodePen of your case would be helpful ...

 

Happy tweening

Mikel

 

[dgu]

i would like to thank you , yes that it is  .

[MarcM]

That looks great.

Do you guys know a way to change and provide a dynamic path on each iteration? 

[ZachSaucier]

23 minutes ago, MarcM said:

Do you guys know a way to change and provide a dynamic path on each iteration? 

Probably use a callback (like onComplete) to create a new animation.