Jump to content
GreenSock

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

Animating through a SVG path and make it responsive

Recommended Posts

Hi all,

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

 

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

Link to comment
Share on other sites

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.

:)

  • Like 5
Link to comment
Share on other sites

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

 

Any idea why autoRotate property does not affect the target?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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?

 

 

Link to comment
Share on other sites

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

 

 

  • Like 5
Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

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

download.png

  • Like 3
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

 

 

  • Like 2
Link to comment
Share on other sites

This looks amazing OSUblake.

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

@mikel That gave me a good laugh. :lol:

  • Like 3
Link to comment
Share on other sites

  • 7 months later...
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???

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

  • Like 2
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.
×