TweenMax Rotation not working on first time

[a.joshi84]

Hello Everyone,

 

I have issue with TweenMax which I have created in my codepen.
When you will open the codepen URL and start scrolling down you will notice that SVG rotation in not rotating smoothly, But when you scroll up again it will start smooth rotating. This issue is only first time.

Can any one please help me on this?

See the Pen XWNNzoK by cpabhi (@cpabhi) on CodePen

[ZachSaucier]

Hey a.joshi84.

 

A couple of key things:

• You're using a really old version of GSAP. We highly recommend GSAP 3! Upgrading is easy.
• You're using ScrollMagic which we don't support here. Instead we highly recommend the official scroll plugin: ScrollTrigger! It's better in every way! The docs and demos section should get you started quickly.

As for your question, I believe the issue is that you're trying to both animate it with CSS transitions and GSAP. You should remove the CSS transitions if you're animating things with GSAP. 

 

I think you'd also benefit greatly from my article about animating efficiently.

[a.joshi84]

Thank you for your reply.

 

For whom I am developing website there upgrade is not possible for me as of now.
I also want to remove CSS transition for rotation, but SVG rotate on every single scroll and I don't want that, I need on each scroll full rotation should happen and rotation should not stop if I stop scrolling.

[GreenSock]

Do you mind me asking why your client refuses to upgrade? 

 

Here's a version that cuts significant file size off of your old version, and it smoothly animates the rotation as well as the colors using the latest GSAP and ScrollTrigger: 

See the Pen c30ea3b6dde050882e2e5e26707b61e5?editors=0010 by GreenSock (@GreenSock) on CodePen

 

No need for jQuery or ScrollMagic or the old (larger) TweenMax. 

 

This will perform better in every way (load time and runtime performance). 

 

Unfortunately we cannot help you with the old ScrollMagic-based version. There are too many problems and we don't support a 3rd party (non-GreenSock) tool like ScrollMagic. 

[a.joshi84]

There are lots of animation in the page which client don't want to go for updating all.

 

Thanks for the demo, the demo which you have provide is working but there is an issue with animation, when you stop scrolling at any point then rotation of SVG also stops.

 

I don't want like like that, I want if rotation is set from 0deg to 180deg then it should not stop in between even if we stop scrolling.

 

In my codepen example if you see then rotation animation don't stop even if we stop scrolling, and it is working perfect but it is not working for first time only, that's the only issue I am facing as of now.

[ZachSaucier]

7 hours ago, a.joshi84 said:

I don't want like like that, I want if rotation is set from 0deg to 180deg then it should not stop in between even if we stop scrolling.

In that case you should create a different ScrollTrigger for each section and then use toggleActions instead of scrub to get the animations running when you need them to.

 

7 hours ago, a.joshi84 said:

There are lots of animation in the page which client don't want to go for updating all.

You don't have to update them all if you migrate to the new version. We recommend doing so because the new syntax is better, but most of the old syntax is still compatible. There might be a few areas that you need to change to be compatible though.