CODEWITHSUNDEEP
javascriptjquerygsap
JLF
JLF

Reputation: 2370

Adding a full revolution (360 degrees) to Directional Rotation in TweenMax

I am creating a carousel and I am using GSAP's TweenMax and its Directional Rotation plug-in to spin the carousel.

The carousel spins slowly until the user clicks the "Get Started" button which then spins the carousel to its first element. My problem is that I want to add a full rotation to the element, but even when I add 360 degrees to the spin target, it doesn't rotate. I figure that degrees act more like coordinates rather than distances.

This is what the code originally was to spin to the target element:

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

This is what I thought would do the trick (notice the 360):

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + 360 + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

But this didn't work. So then I tried:

TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: "+=360_cw" }, ease: Expo.easeInOut });
TweenMax.to( carousel, 1, { directionalRotation:{ rotationY: Math.degrees( item.eq( 0 ).angle + Math.PI / 2 ) + "_cw" }, ease: Expo.easeInOut, onComplete: stopUpdateAppearance });

This had the same result of just spinning to the start position.

I'm not too familiar with GSAP and TweenMax that I can't tell if it's my syntax or my approach. What do you think?

Upvotes: 2

Views: 947

Answers (1)

Mimikos
Mimikos

Reputation: 11

Try subtracting the current carousel rotation (at the time the button is clicked) from 360.

For example

var currentRotation = 50;
TweenMax.to( carousel, 1, { directionalRotation:{rotationY:"+=" + (360-currentRotation) + "_cw"}, ease: Expo.easeInOut });

P.S. Just guessing:

If you dont want specifically to rotate around Y axis, maybe you should remove the rotational object {rotationY} and use this instead:

TweenMax.to( carousel, 1, { directionalRotation:"+=" + (360-currentRotation) + "_cw", ease: Expo.easeInOut });

Hope this helps

Upvotes: 1

Related Questions