Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
danissimo

How to tween second rotateY?

Recommended Posts

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);

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?
 

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×