Jump to content
GreenSock

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

GSAP Run Problem

Go to solution Solved by joe_midi,

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

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

Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

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

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