Animation not playing everytime

[anteksiler]

If you look at here: http://ftnotio.wpengine.comand click on the cart icon on top right, the animation does not always work. If you refresh it, it works.

 

The necessary code is inside: http://ftnotio.wpengine.com/wp-content/themes/notio-wp/assets/js/app.min.js

quickCart: {
            selector: "#quick_cart",
            init: function() {
                var base = this, container = $(base.selector), handle = container.find(".handle"), target = $("#side-cart"), cc = target.find(".spacer"), inner = target.find(".cart-container"), items = target.find(".item"), MainCart = new TimelineLite({
                    paused: !0
                }), toggleHover = new TimelineLite({
                    paused: !0
                });
                console.log("a"), MainCart.add(TweenLite.to(target, 1, {
                    autoAlpha: 1,
                    ease: Quart.easeOut
                })).add(TweenLite.to(inner, .5, {
                    x: 0,
                    ease: Quart.easeOut
                })).staggerFrom(items, .1 * items.length, {
                    y: "50",
                    opacity: 0,
                    ease: Quart.easeOut
                }, .1), toggleHover.add(TweenLite.to(handle, .3, {
                    y: "-3px",
                    ease: Quart.easeOut
                })), $("#quick_cart").toggle(function() {
                    $("#quick_cart").data("toggled", 1), MainCart.timeScale(1).play();
                }, function() {
                    MainCart.timeScale(1.6).reverse(), $("#quick_cart").data("toggled", 0);
                }).hover(function() {
                    $("#quick_cart").data("toggled") || toggleHover.play();
                }, function() {
                    $("#quick_cart").data("toggled") || toggleHover.reverse();
                }), cc.on("click", function() {
                    MainCart.timeScale(1.6).reverse(), toggleHover.reverse(), $("#quick_cart").data("toggled", 0);
                });
            }
        },

See the Pen by (@) on CodePen

[Carl]

Hi,

 

it isn't very efficient for us to try to debug code on your live site.

Please provide a CodePen demo as explained here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

We do not need to see your full production code. You can probably simulate your experience by creating one red div that you click and it plays a Timeline animation that uses a blue div.

Feel free to fork our starter pen: http://codepen.io/GreenSock/pen/hbCir

 

Also, I noticed you are using version 1.11.6. Please try upgrading to 1.14.2 (our starter pens always pull in the "latest" version)

[anteksiler]

Hi Carl, 

 

I always get the below errors when I use the latest version:

 

Uncaught TypeError: Cannot read property 'greensock' of undefined

app.min.js:49 Uncaught ReferenceError: TimelineLite is not defined

 

I am using //cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js

[anteksiler]

Hi guys, any idea why I am getting an error with the latest version?

[Carl]

Sorry, its really hard to troubleshoot without a demo. Haven't seen that error in our tests anywhere.

[anteksiler]

Hi @Carl, I actually found the issue.

 

It seems that another wordpress plugin is loading a previous version of Greensock. How can I isolate the latest version?

[anteksiler]

According to these posts:

http://greensock.com/forums/topic/7074-jquery-wrapper-animate-stop/#entry26398

http://greensock.com/forums/topic/7753-two-versions-of-tweenmax-on-same-page/

 

I need to set Greensock globals to null before adding the new version of GS.

 

However, the plugin I am using (Revolution Slider) already has the below code before the new version I am adding to the page.

window.GreenSockGobals = null;
	window._gsQueue = null;
	delete(window.GreenSockGlobals);
	delete(window._gsQueue);

	window.GreenSockGlobals = oldgs;
	window._gsQueue = oldgs_queue;

So this is not a problem, I suppose?

 

I created a Codepen here: 

See the Pen VYemvx by anteksiler (@anteksiler) on CodePen

 

I just included Revolution Slider embedded Greensock old library and then added the latest version GS.

 

The old versions of Greensock(1.12.*) added works, and the only difference I see that might affect this is AMD compatibility?

[Carl]

thanks for the demo.

 

Note in the code in ThemePunch there is a big typo:

 

window.GreenSockGobals should be window.GreenSockGlobals

 

I forked your pen and included the js scripts in the HTML panel so that I could control the order of loading and when custom scripts execute.

http://codepen.io/GreenSock/pen/jEWBqQ

Note that TweenMax 1.14.2 is loaded and used and there are no more errors relating the TimelineLite or GreenSock

[anteksiler]

Hi Carl,

 

I couldn't make it work with what you did, I even added 

window.GreenSockGlobals = null;

right before the TimelineLite call, but still gave me an error.

 

Your version works even without the above code:

 

See the Pen XJXRrN by anteksiler (@anteksiler) on CodePen

 

I think because the slider JS is not working