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: http://codepen.io/anteksiler/pen/VYemvx 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?

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?

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

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

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); }); } },

Can it be the same as Ceaser css functions: http://matthewlein.com/ceaser/ ?

Hi there, I am using the Quart.easeOut easing on all my animations. On some parts of my website, I would like to use the same easing but using CSS. How can I find the bezier function of Quart.easeOut?

Hi everyone, as I get better in GSAP, my needs also increase and everyone on the forums have been very helpful. What I want to do is, check for a condition, lets say if element.length > 0, and add tween inside the timeline. What is the best way of doing this?

Hi there, tl is another timeline, so its not "this"

Hi there, using the below code to run some animations on click: a.on('click', function() { var selector = $(this).attr('data-filter'); that.isotope('once', 'layoutComplete', function(x, y) { var iso_in = _.pluck(y, 'element'), iso_out = _.difference(_.pluck(x.items, 'element'), iso_in), iso_ani = new TimelineMax({ onComplete: tl.timeScale(1.6).reverse() }); TweenLite.set(iso_in, { opacity: 0, y: 100 }); iso_ani .staggerTo(iso_out, (0.1 * iso_out.length), { y: 100, autoAlpha: 0, ease: Quart.easeOut }, 0.1) .staggerTo(iso_in, (0.25 * iso_in.length), { y: 0, autoAlpha: 1, ease: Quart.easeOut }, 0.25); }); that.isotope({ filter: selector }); return false; }); Everything is working, but couldn't find where it is triggered. Could it because sometimes the elements are empty? If so, how can I prevent that?

If you click on any thumbnail it will open a video, the opening animation is wonderful. The bottom comes first, then the top. How can I achieve this using TimelineMax?

If you look at the codepen example, you'll see that, once you hover out, the animation delays for about 1 second before playing the reverse animation. I also noticed that I am getting a jagged animation.

Thanks Mark

Hi everyone, I am using the TweenMax.js file, but without doing anything, it gives me an error: Uncaught TypeError: Cannot read property 'greensock' of undefined