Jump to content
Search Community

Animating through a SVG path and make it responsive

JaviTubert test
Moderator Tag

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

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

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

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

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

  • 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

  • 2 years later...

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...