joe_midi

Try adding a slight rotation or z:
 
https://bugzilla.mozilla.org/show_bug.cgi?id=739176

Hey @amanfromsolan!
 
I noticed two things about your code:
var button = document.getElementsByTagName("button"); button.onclick = navAnimation.play(); getElementsByTagName will actually return an array of all the elements with that tag name, so you'll need to place the click onto its index within the array, like button[0].
 
 
And you need to assign on click a function, rather than associating navAnimation.play() to it.
 
So more like:
button[0].onclick = function() { navAnimation.play(); }
See the Pen vXggyV by joemidi (@joemidi) on CodePen

@electricalessence: You need to actually call Dipscom's loop function at some point. Just as you are calling anima(); within the HTML to start the banner, you need to call startLoop(); at some point to start the loop. Something like this in your current configuration.
 

See the Pen EgamyB by joemidi (@joemidi) on CodePen
 
However, if you are able to use TweenMax instead, you get the added benefit of being able to use TimelineMax, which simplifies the process a lot.
 
This would be the same animation using TimelineMax:

See the Pen wzBdzP?editors=0010 by joemidi (@joemidi) on CodePen

Codepen URL: 
See the Pen RGwPmJ?editors=1010#0 by joemidi (@joemidi) on CodePen
 
Just changed your id names.
 
I assume its doing what it should be as there are no longer any errors.
 
¯\_(ツ)_/¯

I think you want this:
 
http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/

Hey Yesvinkumar,
 
Welcome to the Greensock Forums!
 
If you want to build up an animation sequence using GSAP, the best way is to use TimelineLite or TimelineMax, its totally what it was made for.
 
Now, when you say interval between a multiple tween, I assumed to mean you want a pause when before the title text animates out.
 
Attached is a CodePen of your animation using TimelineLite with a 2 second pause before the text is animated out.
 

See the Pen BzgmNK?editors=0010#0 by joemidi (@joemidi) on CodePen

@creativeocean:
 
Did you see this post: http://greensock.com/forums/topic/12636-malformed-assets/?p=57431
 
 
 
Also, it would help if you used the feedback button in the bottom right corner to ask them to be more descriptive with their error messages.

From your codepen, you need to put the value in parenthesis:
 
so left:"180px" and not left: 180 px
TweenMax.to(".logo", 4, { left:"180px" });

I think because you are calling GSAP straight away rather than letting the page load is the issue here. There isn't a problem with library, its just that its not available to the browser when it reads that script tag.
 
You are already using a document ready function with your jQuery, so you might as well place it in the bottom of that:
$(document).ready(function(e) { $(function(){ $("#main_nav > a").on("click, touchstart", function(event){ event.preventDefault(); }).on("touchend", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }).on("mousedown", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }); $("#main_nav > li a").on("mousedown", function(event){ $("#main_nav").removeClass("active"); }); $("body").on("mouseover", function(event){ if( $("#main_nav").hasClass("active") && ! $("#main_nav").is(':hover')) { $("#main_nav").removeClass("active"); } }); }); var wind=new TimelineMax(); var repeat=wind.repeat(7); var crazygo=repeat.yoyo(4); wind.to("#main_nav",0.5,{transformOrigin:"50% 0",rotationX:"15",transformPerspective:"125"}) .to("#main_nav",0.4,{rotationX:"12px"}) .to("#main_nav",0.6,{rotationX:"-25px",transformPerspective:"125"}); }); You could also place this script tag at the bottom of the document before the body tag closure.