Jump to content

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


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 post
Share on other sites

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 post
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 post
Share on other sites

Whooped by the great Carl again.  :D

Link to post
Share on other sites

Hi thank you both of you!


you guys are awesome!


because my english its not the best sometimes it hard to explain exactly what i want...anyway carl got me and he answer straight


thanks again!

  • Like 1
Link to post
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.