Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
iamjkdn

Waves animation add pause/resume

Recommended Posts

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

Link to comment
Share on other sites

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

 

 

  • Like 5
Link to comment
Share on other sites

 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

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 3
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.
×