looping "speed lines"

[kvnmcwebn 12 Likes (Newbie)]

Hi, I'm playing around with surface movement on a river and would like the waves  to continuously loop. 

My plan was to make each wave 3x the width of the viewport and then reset its x location to get a loop effect but then I realized that I don't know how to crop a graphic to the viewport.

I'm pretty new to this and was wondering if someone could give me any advice or point me to a tutorial or suggest a better method? 

 

 

Thanks in advance
-Kevin

See the Pen NgXXww by kvnmcwebn (@kvnmcwebn) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @kvnmcwebn

 

Have you seen these pens by @chrisgannon ?

 

See the Pen vNJKJM by chrisgannon (@chrisgannon) on CodePen

 

See the Pen NqyWOw by chrisgannon (@chrisgannon) on CodePen

He's creating those speed lines in a loop with the drawSVG plugin. That plugin is a Club GreenSock bonus, but you can experiment with it on CodePen. Here's some more info about the Club.

https://greensock.com/club

 

Hopefully that helps a bit. Happy tweening.

[kvnmcwebn 12 Likes (Newbie)]

Hi Craig,

Yes I had a look at those and another one of his tutorials. I'd like to keep my lines with the dashed stroke. I'm going to try and make them shorter and use the repeat function. 

[kvnmcwebn 12 Likes (Newbie)]

What would the correct syntax be to add a repeat on the tweens that are using the insert function?:

 

var tl = new TimelineLite();

tl.to("#wave_x5F_1_x5F2_", 14, {x:1600})
tl.insert( TweenLite.to("#wave5_2_", 12, {x:1500}), 0);
 
tl.insert( TweenMax.to ("#wave_x5F_2_x5F_left_2_",  3, {
  attr: { x: 500},  
  ease: Power4.easeInOut,
  repeat: -1,
  repeatDelay: 0;)

});

 tl.insert( TweenLite.to("#wave5_2_", 12, {x:1500}), 0);


    

 

Thanks

-Kevin

[kvnmcwebn 12 Likes (Newbie)]

See the Pen jwzmdd by kvnmcwebn (@kvnmcwebn) on CodePen

 

[Carl 9,066 Likes (Superhero)]

Best advice: don't use insert() or append() those are relics from the Flash days. The API has been streamlined greatly to provide the best control in a very concise way. 

 

You're code could be simplified to 

var tl = new TimelineLite();
tl.to("#wave_x5F_1_x5F2_", 14, {x:1600})
tl.to("#wave5_2_", 12, {x:1500}, 0);
  
tl.to ("#wave_x5F_2_x5F_left_2_",  3, {
  attr:  {r:500, fill: "red" },  
  ease: Power4.easeInOut,
  repeat: -1,
  repeatDelay: 0.5}
)

 

 

I didn't understand the the third tween. Seems you are trying to tween the radius and fill of a path?

Unfortunately it is very cumbersome for us to dig through 1000+ lines of SVG code and try to debug. In examples like this its really best to reduce things as much as possible... like 3 paths or lines.

 

 

 

[kvnmcwebn 12 Likes (Newbie)]

 Hi Carl,

That is a huge help thank you.
Sorry for being such a newb I had just pasted those transforms in from something else...

 

But this is almost working now:

var tl = new TimelineLite();
tl.to("#wave_x5F_1_x5F2_", 14, {x:1500,  ease: Power4.easeInOut,
  repeat: 1,
  repeatDelay: 0});
tl.to("#wave5_2_", 12, { x:1500, opacity:.1,   ease: Power4.easeInOut,
  repeat: -1,
  repeatDelay: 0.5}, 0);
  

I guess I don't understand a few things... are both of these tweens going at the same time or just staggered with the 14 and 12 numbers?

Also in the above code only the second tween is repeating, can you see something in the above that would cause this?
 I will play around with this a bit and post a simplified pen, I apologize about all the code in the first one. Thanks again..

-best

Kevin

[OSUblake 9,990 Likes (Superhero)]

Looping is pretty straightforward. If you're moving something to right, when the left side of it goes past the right side of your view, it's no longer visible, and can be sent to the opposite side of the screen to start the loop over. Setting its x property to its negative width will place it offscreen on the left side.

 

Check out how I did that in this thread.

 

For SVG, you can use the getBBox() method to get the x, y, width, and height of your element. From there, it's just a simple subtraction problem figuring the coordinates out.

// Returns an object with x, y, width, and height
var bbox = mySVGElement.getBBox();

 

However, you need to be careful when using getBBox as it can be very misleading. This post explains why.

 

You can also use the ModifiersPlugin to do looping. Here's a couple really helpful functions you can use with the plugin.

 

 

[OSUblake 9,990 Likes (Superhero)]

Put Your Hands Up 4 Detroit... or at least its river.

 

Your river has depth, so stuff further in the background should move slower, i.e. parallax scrolling. But how? Split your content up into distinct layers, and then lerp your way to glory.

 

I'm using the depth of a layer as the ratio for the lerp function. This creates consistent movement, scaling, shading, etc between the different layers.

 

See the Pen 663cb04165ff7ba1515014844b2e251f?editors=0010 by osublake (@osublake) on CodePen

 

 

[kvnmcwebn 12 Likes (Newbie)]

6 hours ago, OSUblake said:

Put Your Hands Up 4 Detroit... or at least its river.

 

Blake, wow thanks. The parallax "lerp" is exactly what I had envisioned. That sense of depth is quite amazing actually. I wasn't aware we could do physics type stuff like this with gsap. The cloud ani is  great too, I will use it for the clouds.  I had read your post about the getBBox gotchas and I'm going to leave that one for further study. 
Yes, the river is the best part of Detroit,  I was out on Belle Isle over the weekend and was really surprised by the number of people that actually swim in it now.. Braver than I am...

[Carl 9,066 Likes (Superhero)]

Blake, I think you're onto something with this Lerp Your Way to Glory campaign. Awesome demo!

 

[kvnmcwebn 12 Likes (Newbie)]

Hi,
First of all thanks a million for all your help and suggestion on this, especially your demo's Blake.  I'm afraid I'm in a bit over my head for a newb. It's going to take me a long time to unpack everything that is going on in that js file... but I'm working on it, in the meantime it's a lot of copy and paste and when I applied the lerp demo to my existing files and viewport settings there were some positioning issues. I was able to resolve most of them except for the left origin/position of the generated "rect" group element(s).  I can fall back onto the clouds demo but we've come so far to turn back now! Anyway happy fourth guys. Thanks again.

 

See the Pen jwzmdd by kvnmcwebn (@kvnmcwebn) on CodePen

 

[Dipscom 2,815 Likes (Superhero)]

On 03/07/2017 at 4:09 PM, Carl said:

Blake, I think you're onto something with this Lerp Your Way to Glory campaign. Awesome demo!

 

 

Put Blake's face on the other side, give him 50% of the share and...

TAKE MY MONEY! NOW!

[kvnmcwebn 12 Likes (Newbie)]

 Hi, 

This one works in chrome but not firefox or safari... so close... please help anyone! Thanks

 

I think the issue may be between  this:

TweenLite.defaultEase = Linear.easeNone;
TweenLite.set(water, { y: 345 });

and the css:

	#svg {
  position: fixed;
  width: 100%;
  height: 60%;
  background: #111;
}

See the Pen PjBgYR by kvnmcwebn (@kvnmcwebn) on CodePen

 

[kvnmcwebn 12 Likes (Newbie)]

Hi guys pardon for all the posts, I think I have this figured out now, Dumb mistake. I wasn't loading all of the external gsap files during local development..... I'll post a new pen when I have it finished. Thanks again.

[kvnmcwebn 12 Likes (Newbie)]

I had to step away from this for a while this is the stage the animation is at now: I'm working on ambient background animations now, lights and stuff like that. I'll have to join the club to get all the functionality needed to finish. I'll post an update when it's done. Thanks again for all the help guys. 

 

 

See the Pen EXrGLG by kvnmcwebn (@kvnmcwebn) on CodePen