Jump to content
Search Community

Create a simple beating animation

Sara Ree test
Moderator Tag

Recommended Posts

I'm using TweenMax and I want to create such animation provided in the Codepen.  please note I want a function to start and then stop the animation.

 

the code works fine with one issue if you play with my Codepen you can see sometimes the pure Css animation jumps back suddenly to the initial position... 

 

I also used such a code like this but it's not soft as the pure Css animation in the code pen please help.

 

const assistantTween = new TimelineMax();
assistantTween.fromTo(icon, 1, {scale: 1}, {scale: 1.1, ease:Elastic.easeOut,repeat:-1});

 

Although this one has not the explained issue this one is very harsh and not soft as you see.

See the Pen ZEprNoL by pixy-dixy (@pixy-dixy) on CodePen

Link to comment
Share on other sites

Hey Sara. Why are you using TweenMax? We highly recommend using GSAP 3. It's better in every way! Upgrading is easy

 

As for your demo, you are not loading any version of GSAP or have any GSAP code included. Can you please edit your demo to recreate the issue that you're talking about? Please use the "fork" button on CodePen in the bottom right when making new versions that you're sharing for these forums.

Link to comment
Share on other sites

I see, thanks for updating the demo. The bouncing happens you're using an elastic ease. You can use the ease visualizer to see how it (and every other ease) works. If you remove the ease it will work without the bounciness. I also upgraded your syntax to GSAP 3 and stripped a lot of irrelevant things. I also applied a yoyo so the state doesn't jump (like alternate with CSS animations).

See the Pen KKgoKzm by GreenSock (@GreenSock) on CodePen

  • Like 1
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...