Waves animation add pause/resume

[iamjkdn]

Hey

I am using this codepen, which uses TweenMax to  do the wave animation.

 

1. I was wondering, the draw function creates a new TweenMax object in each interval. Wouldn't it have some performance issues?

 

2. I am  trying to set the pause and resume functions to work with those waves. But since, the draw function is creating each new object, how can I go about it?

Setting a

var tween = new TweenMax();

 results in

uncaught exception: Cannot tween a null target.

 

See the Pen jBavvN by peacepostman (@peacepostman) on CodePen

[mikel]

Hi @iamjkdn ,

 

Welcome to the GreenSock Forums.

 

Wavify is a graphically elegant solution.

 

If you want to act with just one Timeline and create some individual waves via SVGs, this could be an alternative solution:

 

See the Pen gxzOVM by mikeK (@mikeK) on CodePen

 

Happy tweening and waving ...

Mikel

 

 

[OSUblake]

 Here's the thread about that pen...

 

 

 

 

7 hours ago, iamjkdn said:

1. I was wondering, the draw function creates a new TweenMax object in each interval. Wouldn't it have some performance issues?

 

This is bascially all that tween is doing. It doesn't last long enough to actually animate anything.

 

wave[0].setAttribute("d", drawPath(drawPoints(factor * settings.speed)));

 

 

7 hours ago, iamjkdn said:

2. I am  trying to set the pause and resume functions to work with those waves. But since, the draw function is creating each new object, how can I go about it?

 

It really doesn't matter if you could touch the tween, pausing and resuming would make the animation jump because it's using the amount of actual time that has elapsed for the factor.

 

var factor = totalTime*Math.PI;

 

 

If you want, here's my waves demo from that thread with play and pause functionality.

 

See the Pen 3300a12fbae94e731e7caa182125f22f by osublake (@osublake) on CodePen

 

[iamjkdn]

Hey @OSUblake

Nice. I am learning about this library. This would help get to know how to format animations properly.

 

@mikel Thanks as well. Really nice support.

 

Cheers.