Jump to content
Search Community

looping "speed lines"

kvnmcwebn test
Moderator Tag

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

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

Link to comment
Share on other sites

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.

:)

  • Like 7
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

 

  • Like 2
Link to comment
Share on other sites

 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

Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

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.

 

 

 

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

 

22yoSxSCQW_poyAhwFTmnA.png

 

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

TAKE MY MONEY! NOW!

  • Like 2
Link to comment
Share on other sites

 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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 2
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.
×
×
  • Create New...