kvnmcwebn

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

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

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

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.

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

Carl's video tutorial on the first page of this thread is brilliant. I found the copy and paste from Illustrator artwork to SVG code works in Adobe Brackets as well as Sublime text.

Thanks that is way more detailed than what I had been referencing.

oh ok, there is an svg box around the polygon element. I see, I better do some more tutorials...

Hi, This is my first experiment with GSAP and I want to make sure that I am getting my process right. I would like to to animate a simple scene with svg elements created in illustrator and pasted right into the html as per the code pen example. I'm just looking for simple motion tweens and some easing. In my example the svg graphic disappears after a few frames of the motion tween. It looks like it goes outside of a containing element of it's own dimensions or something. My process is probably flawed..but I'm not sure where. Would someone steer me in the right direction? -best Kevin