How to tween second rotateY?

[danissimo]

Hello,
is it possible to animate first (or second in CSS tranform paradigm) rotateY in situation like this:
transform: rotateY(72deg) translateZ(50vh) rotateY(-72deg);

[ZachSaucier]

Hey danissimo. If you animate the transform property directly you can do that sort of thing. But in most circumstances there is a better way  If you show us what you're trying to do perhaps we can help you find a better way of doing things.

[danissimo]

Hi Zach,
ok, I will create a pen a little later (I'm trying to create a 3d carousel with boots always facing the screen).

 

In the meantime, I have a couple of other questions: if I animate the transform directly is it possible to use a relative construction like this:
gsap.to (".carouselBase", {duration:1, transform:"rotateY(-=72deg) translateZ(50vh) rotateY(-=72deg)", ease:"power2.inOut"});
I tried it but it doesn't seem to work.

 

Also I'm wondering is it possible to keep relative units work during animation in this case:
gsap.to (".carouselItem", {duration:1, rotationY:"-=72deg", ease:"power2.inOut"});
with CSS:

transform: rotateY(144deg) translateZ(60vh) rotateY(-144deg);

 

I mean is it possible to retain this 60vh during animation and while resizing the browser viewport?
 

[danissimo]

Here's the screen:

 

[ZachSaucier]

13 minutes ago, danissimo said:

if I animate the transform directly is it possible to use a relative construction like this

No. Complex string values like that can only animate the numbers in the string if they keep the same order and relative operators don't work.

 

13 minutes ago, danissimo said:

I'm wondering is it possible to keep relative units work during animation in this case

No, because your first transform is complex (same thing as above). Also you should set all transforms with GSAP on elements that are animated with GSAP  

[danissimo]

Got it, thank you.