Jump to content
Search Community

DrawSVGplugin

busybuilding test
Moderator Tag

Go to solution Solved by Carl,

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

before a couple days a friend of the forum show me how to run svg's one after another and so on...

i need something different if its possible and if anyone can help me with it, i need to have 4 svgs to the same position and when the first animation complete the first svg goes hidden and in his position comes the second one starting its animation and this continues as a loop

 

best regards

george douvogiannis

See the Pen PpOxYN by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

  • Solution

If you give each SVG position:absolute they will all be in the same place. You then just have to add some tweens to fade them in and out at the right time.

Do you need something like this: http://codepen.io/GreenSock/pen/oZqrrO?editors=0110

 

There are definitely ways to shorten the code with loops and functions that build the animations for you so you could do 100 svgs with very little code but I'm not sure if thats what you need.

  • Like 3
Link to comment
Share on other sites

Hi George :)

 

I'm not sure I completely understand the question. Are you saying the 4 SVGs are in the same spot with absolute positioning and need to run one at a time?

 

If that's the question, you can add a tween to fade out the first element right before the second one begins and so on... Then set your timeline to infinitely repeat. So the code from your demo would be something like this:

var fl = new TimelineMax({repeat:-1});

fl.to("#flower01",.2, {autoAlpha:1}, 1)
    .staggerFromTo("#flower01 .path", 0.5, {drawSVG:"0"}, {drawSVG:"100%"}, 0.2)
    .to("#flower01 path", .0.5, {autoAlpha:0})// you could also set() it too    
    .to("#flower02", 0.2, {autoAlpha:1}, "+=1")
    .staggerFromTo("#flower02 .path", 0.5, {drawSVG:"0"}, {drawSVG:"100%"}, 0.2);

Is that what you meant?

 

Happy tweening.

:)

  • 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.
×
×
  • Create New...