GSAP Run Problem

[Lynx]

There is an issue to which I was informed was a problem with GSAP.  This page works, this page doesn't ?

[GreenSock]

I don't think it's a GSAP problem - I noticed a few things:

 

You have typos in your code. For example:

.to("#main_nav",0.4,{rotationX:"12px",})

Notice the trailing comma? That's invalid JavaScript.

 

You also have a crazy amount of space in your transformOrigin value: 

transformOrigin:"50%                                                                                0"

You're using CSS transitions in addition to GSAP - be very careful about that. For example, let's say you've got a 1 second transition on opacity, that means that if you ever try animating that element's opacity with GSAP, the transition will kick in EVERY TIME GSAP MAKES A CHANGE (60 times per second), preventing GSAP's change from being rendered for a full second (in this case). Both GSAP and CSS would technically be performing exactly as they should, but for most users it's not at all what they want/expect. 

 

It's fine to use CSS transitions if you really want to, but I'd strongly recommend avoiding them on elements that you're animating with GSAP. 

[Lynx]

Hrm, I fixed the code error; but, not the JSFiddle page, rather the hosted page does not play the effect ?

[GreenSock]

Can you please create a codepen or jsfiddle that demonstrates the issue? You'll get a much faster answer that way. You said your current jsfiddle page works, right? We need to see a jsfiddle/codepen that doesn't work (illustrates the problem). Any chance you can provide that? I just don't have time at the moment to try to troubleshoot a live page that's tough to edit and tinker with. 

[Lynx]

The problem is only with the live page, those who have offered advice not including this forum have all pointed towards the problem with GSAP library.

[joe_midi]

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.

[Lynx]

Thanks, I'll keep that in mind when using jQuery and GSAP together