2 sided 3d box animation

[OrganicPixels]

Hi everyone,

Please forgive me as I'm new to GreenSock and this is my first 3d box so I'm not sure which problems I'm having here.

 

My main problem with GS is for some reason when my box loads initially it's animating as the page loads when I really just want it fired when it's been triggered by the buttons. 

 

I realize the TweenMax.to method creates the animation but how would I only fire it with an event listener. Maybe I'm not familiar enough with js but I thought when you store logic in a var it needs to be called with an expression via ().  What am I missing here?

 

 

Also, I know this may be a little off GS topic but I'm trying to get my box to be full width and height of the container and it seems like my perspective is off.  Any suggestions on how to handle this?  

 

Thanks for any help.

 

OP

See the Pen LGoJgJ by OrganicPixels (@OrganicPixels) on CodePen

[Jonathan]

Hello OrganicPixels, and Welcome to the GreenSock Forum!

 

I am not near my computer right now but normally timelines will run immediately unless you add paused:true to your TimelineMax or TimelineLite constructor:

 

TimelineLite Docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/

 

So this:

var cubeTl = new TimelineLite();

Becomes this:

// create timeline in a paused state
var cubeTl = new TimelineLite({paused:true});

When i get to my computer i can look at the height issue your having

[OrganicPixels]

Awesome!

Thanks for the quick reply Jonathon.  Huge help!

[Jonathan]

Also here is an example of a 3D cube animations being triggered with an event listener:

 

The codepen only animates rotateY:

 

See the Pen wMZrrP by jonathan (@jonathan) on CodePen

 

GSAP animate using relative values for translate:

 

See the Pen yYbBGb by jonathan (@jonathan) on CodePen

 

GSAP animate using relative values for rotation

 

See the Pen yYvJoW by jonathan (@jonathan) on CodePen