bitworking / react-gsap

React components for GSAP
https://bitworking.github.io/react-gsap/
Other
568 stars 33 forks source link

Control Tween Speed and Cycle #4

Closed ericnguyen23 closed 4 years ago

ericnguyen23 commented 5 years ago

How do I control the speed of Tween?

I'm rotating a wheel and not sure how to control the speed. Here's the code:

<Tween
            directionalRotation={'360_ccw'}
            transformOrigin={'50% 50%'}
            repeat={500}
            ease={'Linear.easeNone'}
 >

Additionally, how would I repeat the tween infinitely? Currently, I'm using repeat and passing 500.

bitworking commented 5 years ago

Try with duration (in seconds) and repeat -1:

<Tween
        directionalRotation={'360_ccw'}
        transformOrigin={'50% 50%'}
        repeat={-1}
        duration={1}
        ease={'Linear.easeNone'}
>

Documentation: https://greensock.com/docs/TweenMax