DrawSVG Feed in dynamic HTML values whilst staggering

[SOZO Design Ltd]

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.

[Carl]

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. 

 

https://youtu.be/0HhjSPVuR

https://youtu.be/0HhjSPVu

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

 

.staggerFromTo(".js-fill", 1, {drawSVG:"0%"}, {
    cycle:{
        drawSVG:["25%", "75%"] //alternate these values
        }, 
    ease:Power2.easeIn
    }, 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%"}, {
    cycle:{
        drawSVG:function(index, target) {
            var percent = $(target).parent().attr("data-percent") // find parent SVG of target and grab data-attribute
            console.log(percent)
            return percent;
            }
        }, 
    ease:Power2.easeIn
    }, 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:

 

 

 

 

 

[SOZO Design Ltd]

  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!

[SOZO Design Ltd]

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

 

[PointC]

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.

[SOZO Design Ltd]

Wicked, thanks so much peeps!