Sara Ree Posted January 1, 2021 Share Posted January 1, 2021 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 More sharing options...
ZachSaucier Posted January 1, 2021 Share Posted January 1, 2021 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 More sharing options...
Sara Ree Posted January 1, 2021 Author Share Posted January 1, 2021 Hi, I have edited the codepen... please have a look ... Link to comment Share on other sites More sharing options...
Sara Ree Posted January 1, 2021 Author Share Posted January 1, 2021 it shakes a lot... I just used scale not shaking!!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 2, 2021 Share Posted January 2, 2021 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now