Dynamics to menu ?

[Lynx]

I want to add some dynamics (wind) to only the depth (z) of this menu when it is collapsed and only when it's collapsed !

[Diaco]

Hi Lynx 

 

pls make a Codepen Demo available for your questions ... 

anyway , you need to add rotationX tween + transformOrigin:' 50% 0% '

[Lynx]

Thanks

[Lynx]

JSFiddle is playing the code fine, when I upload to the server, nothing happens ?

[Lynx]

Any help ? Link is in the first post.

[Diaco]

Hi Lynx 

 

as I mentioned before , pls make a reduced Codepen Demo available .

 

anyway pls try something like this : 

See the Pen MwxEGy by MAW (@MAW) on CodePen

 

TweenLite.set('#menu',{transformOrigin:'50% 0%',transformPerspective:"500px"});
TweenLite.from('#menu',6,{rotationX:-120,opacity:0,ease:Elastic.easeOut.config(1,0.15)});

and pls check GSAP Ease Visualizer : http://greensock.com/docs/#/HTML5/Easing/Elastic/

 

and this blog post about 3D Transforms : http://greensock.com/css3/

[Lynx]

No, no, no the effect is working in JSFiddle; not in my actual page, what I don't understand ?

[Carl]

I'm confused,

 

This animation here: http://www.thecreativesheep.ca/wdp/wip/dropmenu.htm from your first post appears to work (no errors in console either).

 

Later on you say it isn't working in your actual page  or on jsfiddle but you haven't showed us links for either of those... which is why Diaco has been asking to see something.

[Lynx]

In post #5 I mentioned to look here.

[Carl]

i see no links in this thread to jsfiddle, especially in post#5 which says to check post #1

???

 

 

Please try again.

[OSUblake]

Ha! It took me awhile to even find the link in the first post. Can you add underlines to the links? The green text doesn't stand out that well from the other text.

[Lynx]

I was just using the default forum link; those willing to help, I assume you found ? Otherwise any idea as to what the problem is ?

[Carl]

Lynx,

 

You have 3 experts here willing to help you. The issue is that you have not provided a link to jsfiddle that we can find.

There is one link in post 1 that links to creativesheep. That's it.

 

 

I believe Blake was asking that we change our css styles so that links are more clear (which we can look into).

[Lynx]

I sent the JSFiddle to someone else; here it is.

[Carl]

I'm having a little trouble deciphering how / why you are mixing in css transitions and what the end result is supposed to be.

Earlier you said the jsfiddle is working fine, so I won't spend a lot of time trying to figure it out.

 

You said it wasn't working on your site, is there a link we can see? Or is your site the creative sheep thing?

Please keep in mind that we focus our support on the GSAP API, since you already have it working in jsfiddle, I'm not sure we can do a lot to debug your site implementation, but we are willing to take look.

[Lynx]

Or is your site the creative sheep thing?

 

 

Correct, that is the site ! At first I thought it was a CDN issue then I thought it's working on JSFiddle