Jump to content
Search Community

GreenSock Javascript Js Suggestion: Please Post Full Code & Downloadable Demos For CSS 3D Transforms

Sweetj77 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

Hello,

 

I love GreenSock, it's a phenomenal product. I am a Flash Developer migrating to HTML, Canvas, CSS, and Javascript web designing. The Javascript versions are excellent.

 

The one challenge I am having is trying to make the CSS 3D Transformations work. I looked at the demos of how powerful these transformations can be at:

 

http://www.greensock.com/transitions/

 

http://www.greensock.com/css3/

 

and the "CssPlugin" section of your documentation at:

 

http://api.greensock.com/js/

 

But, unfortunately I see a whole lot of small snippets of code (i.e. the trailer for a really awesome movie that I can't wait to see), but I would really like to see the whole html page with the css and javascript included (i.e. the whole "unrated, director's cut with alternate endings and commentary.")

 

After searching through the GreenSock forums I found this link that the great Carl Schooff posted some downloadable examples of CSS Transformations:

 

http://forums.greensock.com/topic/6230-how-to-tween-css3-transform-properties/

 

 

What I'm trying to say, is I would really appreciate it, if it were a little easier to figure out how to use these powerful tools to the most.

 

Thanks, for viewing & best wishes,

J

Link to comment
Share on other sites

CSSPlugin: The Movie, is currently being shopped around to the major studios. Johnny Depp has shown interest but its impossible to get a commitment out of that guy;)

 

J, your point is well-taken.

 

We certainly want to make a few tutorials on the 3D transforms. Give me a little time, I'll get you some "stand alone" versions of the 3D demos soon.

 

Thanks so much for your high and humorous praise.

 

-Carl

  • Like 1
Link to comment
Share on other sites

I moved the 3D demos over to codepen.io.

 

You can fork them and edit them live or use the "share" feature to download a zip of a single html page.

 

transformPerspective:

See the Pen 2a85dcafee6ead8a04e19152f6439f77 by GreenSock (@GreenSock) on CodePen

 

 

transformPerspective vs perspective:

See the Pen 1e7b3c573ae478e7d9e68afd582bb63f by GreenSock (@GreenSock) on CodePen

 

transformOrigin:

See the Pen 8ce6d59776cfdf8e6e29b87ef522ed13 by GreenSock (@GreenSock) on CodePen

 

orange spinning divs from plugin demo:

See the Pen 688f9cd60a9f5360355677074f439058 by GreenSock (@GreenSock) on CodePen

 

Thanks for your input. I think these will help you quite a bit and some other folks.

Link to comment
Share on other sites

Carl,

 

Thank you so much for posting those downloads. For some reason, when I open the html file for all the examples in my browser, the graphics are there but the progress slide bar isn't there and the animation doesn't work. I noticed you referenced jquery in the examples.

 

Is it absolutely necessary, to use jQuery to make these transitions work. The reason I ask is that I don't know jQuery and would prefer to do var varName = document.GetElementById('DivIdVariableNameHere') instead. Do you have any idea what I'm doing wrong?

 

Thanks, J

Link to comment
Share on other sites

I see the problem, seems to be a codepen bug. When they are packaging the html file they have the wrong links to jQuery and the jQueryUI stylesheet.

css good:

<link rel='stylesheet' href='http://ajax.googleap...jquery-ui.css'>

 

jquery good

<script src="http://ajax.googleap...n.js"></script>

 

For both files, codepen was leaving off the http:// for some reason.

Just update those paths in your html source.

 

GSAP in no way depends on jQuery, so yes if you want to select your elements with document.getElementById() that is totally fine.

 

Personally I find jQuery to be a great companion to GSAP and makes my coding much quicker and cross-browser safe.

  • Like 1
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...