Jump to content


Graph animation with StaggerTo

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



2 days ago I purchased the 'Shockingly Green' package, and thoroughly enjoying it, and I am very excited with the endless possibilities!


I have a question. I've created a graph using SVG and the animation is working, the JS code I used is:

(function($) {
  $("#containergraph").load("anims/graphgood.svg", function() {
    var tween = TweenMax.staggerTo(".points", 1, {
        y: '-=435',
        ease: Back.easeOut,
})( jQuery );

As you can see HERE the graph does appear, but I think I don't use it the right way,


The SVG size is 1300x by 600, and therefore it cuts off the top part of my animation when I use the JS code (y: '-=435').


Every line has the correct height already( you can see my SVG HERE), so I would like to see an animation where it starts at at 'y:0' and completes every stagger animation at 100% height for each line if that makes sense. At this moment I have to hide the SVG with Z-index, and I think thats not the right way to achieve the result I want.


Before I purchased Greensock I used SMIL and added the animated SVG as a 'background-image' in the CSS which did the trick, however the compatibility was very limited.


I added an image with the result I like to achieve.


Many thanks!




P.S, I didn't add a Codepen because it is hard to replicate the Wordpress environment on Codepen.



Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


I'm not really sure the exact effect you need and I really struggled to decipher the complex HTML setup on the WordPress site as it seemed there were numerous overlapping elements + the use of overflow hidden. Its always best to reduce the example as much as possible.


I placed the SVG in a CodePen.


Is that the effect you are going after?


Notice I used xPercent which starts animating each element FROM a position relative to its height.


Probably best if we just focus on getting the SVG animation right and then you can figure out how to handle the integration on the site.

  • Like 1
Link to comment
Share on other sites

Hi coenhallie :)


Welcome to the GreenSock forums.


I struggled with your question as well. Checking your site in Firefox seems like it may be working correctly, but in Chrome I'm seeing console errors. I know replicating the WordPress environment in a CodePen can be problematic, but we really need to see something simplified to offer the best assistance. Maybe fork Carl's pen and work from that to achieve your desired result?


Thanks and happy tweening.


Link to comment
Share on other sites

Currently you have the code that calls for GSAP (6-layout.js) before the GSAP CDN link. Maybe that's the root of your problems?

Link to comment
Share on other sites

Hi Carl, PointC & Dipscom,


Thanks for your help :) The 'xPercent' for the JS code did the job for the animation :) I still have to figure out what the best way is to implement the animation for the heading section, I will get there though. Working with Wordpress certainly has his upsides, but code wise it's not as clean as I would've liked and harder to debug.





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