anteksiler

Hi guys, I recently noticed an error with CSSRule that only happens when the css styles are served from CDN assets. So if the stylesheet is inside a local path, the plugin works, but when the same stylesheet is loaded from CDN, CSSRule plugin says "cannot tween a null target", and I can verify the css rule is available on DOM. In this particular case, it was a pseudo element, ":after".

Since Typekit asynchronously loads the fonts, the fonts change midway during the Splittext animation, causing unexpected line-breaks. How can we wait for the typekit font loading and then run the animation? https://werkstatt.fuelthemes.net/werkstatt-text-style/portfolio/the-deer-hunter/

Hi guys, I am working on a portfolio site (http://werkstatt.fuelthemes.net/portfolio/paloma-rincon) On the top right, there is a button which brings up a box, and then animates the splitted text. However, since the box is hidden on first load, split text does not accurately work.

Hi there, I forked that demo and only removed wordDelimiter: "*" option: http://codepen.io/anteksiler/pen/qNvRwj

The problem I have with SplitText is before I do something like below: tl.staggerFrom(p.lines , 0.4, { autoAlpha: 0, delay: 0.5, y: 20 }, 0.1); is that the lines are visible at first, so I need to hide them using css, but since SplitText does not addClass to the original container, I am having problem hiding the original lines.

I just upgraded my membership to get access to SplitText. However, I cannot get it maintain the spaces between words. I am using basic configuration: var splith1 = new SplitText(h1, { type: "chars" }), tl = new TimelineMax(), splith1Array = base.randomize(splith1.chars); tl.staggerFrom(splith1Array, 0.5, { autoAlpha: 0, y: "100%" }, 0.1); It can also be seen on default GS demos: http://codepen.io/GreenSock/pen/pbWwLZ

Hi there, I have specific links, and hover, I would like to change the image on the right. However, since it's a long animation (I would like to fadeIn the image, and then have it zoom slowly), it's not working as I would like. container.each(function() { var _this = $(this), images = _this.find('.portfolio-image'), links = _this.find('.type-portfolio'); function animateOver(i, el) { var tl = new TimelineMax(); if (!images.eq(i).is(':visible')) { tl .to(images.filter(':visible'), 0.5, {autoAlpha: 0, scale: 1, display: 'none'}, 0) .to(images.eq(i), 0.5, {autoAlpha: 1, display: 'block'}, 0); } tl .add(TweenMax.to(images.eq(i), 5, {scale: 1.05})); el.animation = tl; return tl; } function animateOut(el){ el.animation.reverse(); }; links.hoverIntent(function() { var i = $(this).index(); animateOver(i, this); }); });

Hi Jonathan, changing it with TweenMax set definitely decreased the lag

Hi Jonathan, that's a really informative post, I'll look into the lagSmoothing right away! Thanks alot! I am using the following code to animate the mouse cursor, so it's not GSAP moving the mouse. gallery.find('.thb-arrow').each(function(){ var _that = $(this), offset = _that.parents('.swiper-nav').offset(), mouseX = Math.min(e.pageX - offset.left, _that.parents('.swiper-nav').width()), mouseY = e.pageY - offset.top; if (mouseX < 0) { mouseX = 0; } if (mouseY < 0) { mouseY = 0; } window.requestAnimationFrame(function(){ _that.css({left:mouseX - 40, top:mouseY - 40}); }); }); Do you have any examples moving the cursor with translate3d?

Adding requestAnimationFrame helped with the speed a little bit, but not 100%

I am having some fps problems while animating the mouse cursor: http://twofold.fuelthemes.net/home-page/ The cursor changes on the left and right sides. Does anyone know how I can remedy that?

Hi there, could it be because I am passing a jQuery object to TweenMax?

Hi there, I am using the below codeon our theme here: http://goodlife.fuelthemes.net/2015/10/10/sunset-overdrive-and-the-mystery-of-the-mooil-rig-review/ TweenLite.to(_this, 1, {attr:{"stroke-dashoffset":offset}}); If you look at the console, you'll see that we are getting SVG related notices: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

Hi everyone, is there any examples that utilize user's mouse to modify element animations using GS? Best example would be animations three.js

Interestingly, I solved this by assigning the animation to the window element by: var window.MainCart = new TimelineMax({ paused: true, onStart: function() { $('#side-cart').css('display', 'block'); }, onReverseComplete: function() { $('#side-cart').css('display', 'none'); } }); Is there any reason I shouldn't be doing this?

Hi @Carl, Does the kill() allow me to remove the children from "MainCart" variable? What's the preferred method or what would you do in this scenario?

Like I told you, I cannot change the way AJAX works. The only way for me to fix this is to detect the dereferencing and create a new animation. But to answer your question, they are using jQuery's ReplaceWith(): https://github.com/woothemes/woocommerce/blob/0accdf6f10b19c59e4a517b1401bd8519a11fc17/assets/js/frontend/add-to-cart.js#L87

This is my code: var MainCart = new TimelineMax({ paused: true, onStart: function() { $('#side-cart').css('display', 'block'); }, onReverseComplete: function() { $('#side-cart').css('display', 'none'); } }); MainCart .add(TweenLite.to($('#side-cart'), 0.5, { autoAlpha: 1, ease: Quart.easeOut })) .add(TweenLite.to($('#side-cart').find('#cart-container'), 0.5, { x: 0, ease: Quart.easeOut })) .add(TweenMax.staggerFrom($('#side-cart').find('.item'), $('#side-cart').find('.item').length * 0.1, { y: "50", opacity: 0, ease: Quart.easeOut }, 0.1)); What I am thinking is, I should kill the MainCart animation completely and re-create it everytime the ajax runs. Is this correct?

Hi @jamiejefferson, The ajax is handled by WooCommerce, therefore I cannot create a CodePen demo. It would really help if you could tell me what to do in case an element is dereferenced. I could not find an update or reinitialize method in the docs.

Hi @gani, Already tried that, it doesn't work. My website is: http://notio.fuelthemes.net/shop You can try the top cart icon, which works perfectly. When you click on "Add To Cart" on any product, the #side-cart gets updated. Then the cart icon stops working.

On my page, some elements are being updated by ajax. This causes GS not to bind the animation to that element. It works on page load, but once the element is updated (whole element is updated), the animations stop to work. Is there a workaround for this?

Thanks GreenSock, will it retrieve all currently active Timelines ?

Is there anyway we can do this? I am getting an udefined error with TimelineMax.getActive(); Is that because I am running it before any Timeline is started? I do not want my animations over each other, so I need all other timelines reversed before starting any of them. I am using TimelineMax for lightbox animation.

Is there anyway we can get a list of animations currently running on the page?

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: http://codepen.io/anteksiler/pen/XJXRrN I think because the slider JS is not working