[Dashed line with infinite loop, code correct?]

Awesome! It's motivating to hear both of you guys like the code!

 

Thank you both for reviewing the code and for your quick response

 

 

Cheers,

 

Coen

[Dashed line with infinite loop, code correct?]

Hi!

 

I wanted to create a dashed line with an infinite loop, I finally have the result I wanted with just a few lines of code (took a few hours to understand the relationship between the code elements as I have no experience with JS at all). Before I implement it into my website I would like to know if I did it correctly. 

 

Thanks for checking out my code!

 

 

Here is my CodePen: 

 

 

Cheers,

 

Coen

See the Pen EZaRyp by coenhallie (@coenhallie) on CodePen

[Graph animation with StaggerTo]

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

[Graph animation with StaggerTo]

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.