Jump to content
GreenSock

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

3D modelisation in Edge Animate

Recommended Posts

Hi,

I love GSAP. That gives incredible features in Edge Animate, Adobe DPS and Aquafadas ! Thanks for all.

But, I'm trying to build a 3D model using some combined symbols inside Edge Animate (like a menu including some pictures wiches are all in a 3D orientation with rotationY).

Then, each picture tween I can write works lonely, and the global menu too. But when I try to animate the pictures while I am moving in 3D the menu, pictures are staying in 2D.

And the 3D animation of the pictures looks 2D, staying thin, flat, as if I could only tween one object in one 3D space at the same time. How should I do, to organise my symbols as a real 3D composition and build something like a coverflow ?

Thanks.

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

The usual solution for an issue like this is preserve-3d, but that's a value for the transform-style property, something purely CSS.

 

Honestly I have no idea how you can achieve that in Edge Animate. As much as we'd love to solve every user issues here in the forums we tackle the ones related with GSAP.

 

Luckily Chris Gannon is light years away from me in terms of this stuff and He has a blog post and demo of a cube with some edge symbols in it, check it out:

 

http://chrisgannon.wordpress.com/2012/10/25/3d-animating-cube-in-adobe-edge-and-greensock/

 

Also Chris has been around in the forums lately so he might catch this one as well.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Hi Zhur,

 

Rodrigo is right regarding 'preserve-3d'.

 

In Edge Animate you can apply this to the symbol's element like this (using GSAP):

var mySymbol = sym.getSymbol('symbolOnStage');
var mySymbolElement = mySymbol.getSymbolElement();
TweenMax.set(mySymbolElement, {
    transformStyle:'preserve-3d'
});

Or apply it to all its children:

var mySymbol = sym.getSymbol('symbolOnStage');
var mySymbolElement = mySymbol.getSymbolElement();
TweenMax.set(mySymbolElement.children(), {
    transformStyle:'preserve-3d'
});

I tend to set the stage's perspective too but you could set the symbol element's parent persepctive (if that isn't the stage):

var stage = $('#Stage');
TweenMax.set(stage, {
   perspective:1200
});

And:

var mySymbol = sym.getSymbol('symbolOnStage');
var mySymbolElement = mySymbol.getSymbolElement();
TweenMax.set(mySymbolElement), {
    perspective:800
});

Or maybe set the individual children's perspective (so they all have their own vanishing points):

var mySymbol = sym.getSymbol('symbolOnStage');
var mySymbolElement = mySymbol.getSymbolElement();
TweenMax.set(mySymbolElement.children(), {
    transformPerspective:800
});

I don't know your structure so it's difficult to say what will work for you.

 

What I do know is that if you want any 3D stuff to work in IE then don't nest any elements in other elements because 'preserve-3d' is not implemented even in IE 11 AFAIK.

 

To get around this you must make sure everything is animating in 3D space on the stage.

 

Btw I have built a coverflow in Edge Animate here:

 

http://chrisgannon.wordpress.com/2013/09/18/youtube-javascript-coverflow-in-adobe-edge-animate-and-greensock/

 

There is the demo and source files at the bottom.

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Hey Chris, thanks for jumping in and your great input.
 
One question though. The CSS Plugin has a feature to set a common perspective for every element being animated in 3D:

CSSPlugin.defaultTransformPerspective = value;

I don't know if you've played with it in Edge Animate and if it'll be helpful in this particular scenario.
 
Here's a part of the Docs:

To get your elements to have a true 3D visual perspective applied, you must either set the [/size]"perspective" property of the parent element or set the special "transformPerspective" of the element itself (common values range from around 200 to 1000, the lower the number the stronger the perspective distortion). The "transformPerspective" is like adding a [/size]perspective() directly inside the css "transform" style, like:[/size]transform:perspective(500px) rotateX(45deg) which only applies to that specific element whereas if you want to a group of elements share a common perspective (the same vanishing point), you should set the regular "perspective" property on the parent/container of those elements. [/size]
 

//apply a perspective to the PARENT element (the container) to make the perspective apply to all child elements (typically best)
TweenLite.set(container, {perspective:500});
 
//or set a default perspective that will be applied to every individual element that you tween in 3D:
CSSPlugin.defaultTransformPerspective = 500;
 
//or apply perspective to a single element using "transformPerspective"
TweenLite.set(element, {transformPerspective:500});

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

I tend to add the CSS I need only to the individual elements that need it and never to all elements. The simple reason is (and I might be wrong) that I would be adding unnecessary code to elements that don't (and will never) need it which can lead to bloat. 

 

Correct me if I'm wrong!

 

Cheers,

 

Chris

Link to comment
Share on other sites

Hey Chris,

 

I understand that the defaultTransformPerspective works for individual elements being animated in 3D and not for every DOM element or Edge symbol in the stage being animated by GSAP.

 

What basically does is save code to add the perspective to every single element or array of them and for my personal experience you get far better results (in terms of being realistic) than using individual perspectives for each element. I don't know though how it goes in terms of performance, Carl or Jack could give us a proper answer in that regard, but I've never seen any difference whatsoever.

 

But at the end the important thing is what works better for you, if it ain't broken don't fix it, right? ;)

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Hey Rodrigo,

 

Good to know thanks!

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.
×