Jump to content
GreenSock

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

GSAP SVG animation while scrolling of elements

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

I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) 

I'd like to achieve : 

- path { they should animate with delay, so I could have the feeling that they are walking.  }

- line {it's a stroke which should animate from 0 to 100%.}

- polygon (are two arrow that should fade.)

 

I hope it's something that you guys could quickly fix. 

See the Pen jZgQjz by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

I'm not 100% sure I follow what you'd like to happen, but it looks like you're making this more complicated than it really needs to be. Instead of declaring a variable for each foot and then a tween for each to animate onto the screen, you can simply use a stagger.

 

tween.staggerTo("path", 0.9, {stroke: "#ffffff", fill:'#ffffff'}, 0.2 );

 

See the Pen aYovzY by PointC (@PointC) on CodePen

 

Drawing your line with DrawSVG won't work correctly because it's a dashed line. You'll need to use a mask. I wrote about that here:

(Also, the drawSVG plugin wasn't being loaded in your pen.) I didn't see any polygon animation in your demo, but it should be a simple matter of targeting the polygons and animating opacity or autoAlpha.

 

I'd recommend some different naming and grouping of your SVG artwork before you get to the animation phase. Class names of .st0 and .st1 are not very helpful. Especially when you're building complex SVGs. Try something like grouping all the foot paths into one group named '#feet' or whatever you like. Then you can easily target all of them in your tweens with "#feet path". Proper artwork prep will make your life much easier.

 

Happy tweening.

:)

 

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