Jump to content
GreenSock

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

2 sided 3d box animation

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

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

 

:)

  • Like 3
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.
×