Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
SOZO Design Ltd

DrawSVG Feed in dynamic HTML values whilst staggering

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 have created a basic drawsvg animation where the content of the circle fills with a colour. I will have multiple circles on a page so I want the animation to loop through each item which I have achieved with the staggerFromTo.


The next step is to feed in dynamic values for the drawsvg animation which I was hoping to pull from data-percent="x" as the values will be output on the page. I have done this but I am not sure on the best way to loop through this data...as at the moment it only pulls in the last data att value rather than the unique value for each circle.


I hope my intention is clear. Any help would be appreciated :)

See the Pen NgVMLG by mplunkett5 (@mplunkett5) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks so much for the clear description and clean demo. Super helpful.


Historically the solution would have been to loop through all the SVGs, read the attribute and target and then create unique tweens for each circle and plop them into a timeline with offset start times. The reason a loop like this would have been necessary is that staggerTo() required that all animations used the same end values.


All stagger methods (staggerTo, staggerFrom, staggerFromTo()) now support a cycle property which gives you complete control for the end value of each tween. 




Using an array for your cycle values you could alternate the drawSVG values like so:


.staggerFromTo(".js-fill", 1, {drawSVG:"0%"}, {
        drawSVG:["25%", "75%"] //alternate these values
    }, 0.2)


See the Pen EXzdPp?editors=0010 by GreenSock (@GreenSock) on CodePen


For what you need to do you can use a function to return a unique value for each target. In the code below you will see that I use jQuery to snag the data-percent attribute of the target's SVG parent


.staggerFromTo(".js-fill", 1, {drawSVG:"0%"}, {
        drawSVG:function(index, target) {
            var percent = $(target).parent().attr("data-percent") // find parent SVG of target and grab data-attribute
            return percent;
    }, 0.2)


See the Pen rwgqed?editors=0010 by GreenSock (@GreenSock) on CodePen


There is more info on cycle in the docs for each of the stagger methods. Definitely watch this video:






  • Like 4
Link to comment
Share on other sites

:-D  Thanks for your quick and detailed response. 


Cycling looks very interesting, I will look through your implementation and come back if I have any further queries!

  • Like 1
Link to comment
Share on other sites

@Carl Ok so a couple of follow up questions:

Firstly is that the recommend way of formatting greensock parameters as per your codepen?


Secondly as you may have seen from my codepen by next task with this animation is to fade in the contents of the circle inline with the stagger ending (not sure if I am going to do anything more fancy than fade it in). i.e. circle fills, text fades, circle 2 fills, text2 fades. vs at the moment where the circles run, then text appears.


I thought I could do this with labels. Add the label to my timeline then run the animation I want at that point. Looking at it now though all I have done is add a label, then run the animation...it would have run in the same way with or without the label implementation. Is it possible to hook into the end of the each staggered item in the way I want?


Thanks in advance.

See the Pen ModPdP by mplunkett5 (@mplunkett5) on CodePen


Link to comment
Share on other sites

If you want the text to fade in at the end of each drawSVG animation, a simple approach would be to use a stagger with the same duration and offset as the drawSVG stagger. You could then use the position parameter to start the fade stagger at 1 second. (that's when the first drawSVG animation ends). Here's a fork of your pen with that solution.


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

Just a note - the last tween in your demo has two sets of vars which is for a fromTo() tween. With a .to() tween, you only want one set of vars. You also don't need to use the CSS wrapper. 


Hopefully that helps. 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.