Jump to content
Search Community

using TweenLite to set transform: rotateY(x) translateZ(y)

kmcg101 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I use GSAP to automate writing CSS.  My job is making web ads so when I invent a new type of ad, it needs to look good and I have to be able to crank out many of them in a short amount of time.  I'm working on one now that uses the following css to create a 3D tube with X faces

.tube> :nth-child(1) {
    transform: rotateY(0deg) translateZ(5.6em);}
.tube> :nth-child(2) {
    transform: rotateY(72deg) translateZ(5.6em);}
.tube> :nth-child(3) {
    transform: rotateY(144deg) translateZ(5.6em);}
.tube> :nth-child(4) {
    transform: rotateY(216deg) translateZ(5.6em);}
.tube> :nth-child(5) {
    transform: rotateY(288deg) translateZ(5.6em);}

This works great when the code is in the CSS file.  But when I try to set the same values using TweenLite in JS, it will not work for all of the sides.  For my 5 sided example, 2 of the sides are smaller than the other ones

TweenLite.set("#face0", { transform: "rotateY(0deg)   translateZ(5.6em)"})
TweenLite.set("#face1", { transform: "rotateY(72deg)  translateZ(5.6em)"})
TweenLite.set("#face2", { transform: "rotateY(144deg) translateZ(5.6em)"})
TweenLite.set("#face3", { transform: "rotateY(216deg) translateZ(5.6em)"})
TweenLite.set("#face4", { transform: "rotateY(288deg) translateZ(5.6em)"})

Is there any reason why TweenLite does not work for all of the sides?

See the Pen MJwpbY by kmcg101 (@kmcg101) on CodePen

Link to comment
Share on other sites

thanks so much.  I'm looking forward to digging into this stuff again on Monday.  I've been using what I have in my codepen for 4 sided cubes for a couple years and it's been fine.  But once it changes to 5 sides and up, my way stops working.

Link to comment
Share on other sites

On Monday I had time to dig into your suggestions.  Thanks so much.  In the next few days I will bend it into something that I can automate to spit out many ad sizes in just a few minutes.  Quick question, is there any difference between:

 

TweenLite.set(element, {
        rotationY: index * angle
}
and using css: {}
TweenLite.set(element, {css:{
        rotationY: index * angle}
}
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.
×
×
  • Create New...