Graph animation with StaggerTo

[coenhallie]

Hi,

 

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,
        Repeat:-1},
        0.1);
    });
	
})( 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!

 

,Coen

 

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

 

[Carl]

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.

http://codepen.io/GreenSock/pen/PbvwQO

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.

[PointC]

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.

[Dipscom]

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?

[coenhallie]

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.

 

Thanks,

 

Coen