Chrysto

Hi nemmoj, and welcome to our forum! By the time I wrote the post, it was more like proof of a concept and dirty and easy fix, rather than ready to use production code. I would suggest you to try SplitText plugin for splitting the characters/words, and again you can animate them with TweenMax. Also, it would be great if you post link to a live demo of the page, so I can take a look of the WP generated markup. Best, Chris

Yes, on OSX 10.9.2. I see the animation pauses and a the div is black for a second.

Well, it depends on how/what you're trying to animate. I created a simple pen that makes every char in different color: http://codepen.io/bassta/pen/ebyjw?

Hi, I think the answer to the question is different for every case. It depends on the type of animation, what browsers you need to support, does saving few extra kilobytes worth dropping GSAP etc. In my workflow I use jQuery for selection engine, to add/remove events and to modify the DOM. For all my animations I use GSAP. Basically adding and removing a class can simply show/hide things, and if you set transition in the CSS, in modern browsers it will be animated. But it will look ugly on old browsers, and also you don't have so much control over what's happening for more advanced animations. Note that you will get the GSAP performance boost only if you actually animate things with jQuery animate() method and include GSAP and jquery.gsap.js plugin, or use TweenMax/Lite instead of jQuery animate.

Hi and welcome to forums; The first thing that comes to mind ( easy, but not very optimised ) is to clone the list, and animate the original list and it's clone via TimelineMax. Then, on hover to pause and play the timeline. Here is simple demo: http://codepen.io/bassta/pen/tEarb Here is the JS ( jQuery must be included ); var $holder = $(".holder"); var $list = $holder.find("ul.list"); var $clonedList = $list.clone(); var listWidth = $list.find("li").length * 200; var endPos = $holder.width() - listWidth; $list.add($clonedList).css({ "width" : listWidth + "px" }); $clonedList.addClass("cloned").appendTo($holder); //TimelineMax var infinite = new TimelineMax({repeat: -1, paused: false}); var time = 5; infinite.fromTo($list, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 0); infinite.fromTo($clonedList, time, {left:listWidth}, {left:0, ease: Linear.easeNone}, 0); infinite.set($list, {left: listWidth}); infinite.to($clonedList, time, {left: -listWidth, ease: Linear.easeNone}, time); infinite.to($list, time, {left: 0, ease: Linear.easeNone}, time); //Pause/Play $holder.on("mouseenter", function(){ infinite.pause(); }).on("mouseleave", function(){ infinite.play(); }); //Show/Hide overflow - this is to see how it works, not needed actually $("#ov").on("click", function(){ $holder.removeClass("hide-overflow"); }); $("#oh").on("click", function(){ $holder.addClass("hide-overflow"); }); If some part of the code confuses you, I suggest you to first read the documentation of TimelineMax.

Hi Dave, why don't you load the files locally, not from CDN when you develop? I use Codekit2 in my projects and it can output source maps, this is other option. I just uploaded a list of sourcemaps you can use to debug minified code, it is for latest version of GSAP: http://cloud.bassta.bg/gsap-sourcemaps/

Hi, I would do it with one extra element - http://codepen.io/bassta/pen/ipwEn Also, I've tried one more technique ( http://codepen.io/bassta/pen/cvdjG ) - animating width and left positioning to make such an effect, but it doesn't look very smooth

Hi, I can tell nothing without seeing the actual slider code. If you create a codepen demo I may be in greater help. For now, what I would suggest is to upgrade to the latest version of TweenMax.

Interesting bug, currently I can only test on Webkit browsers, on Mac OSX, but seems like with different tweening engines ( jQuery animate() for example ) , with different properties animated ( left, margin-left etc. ) this happens.

I think this is what he ment: http://codepen.io/bassta/pen/oljqA I added the :hover pseudo-class and also made the tween slower, so it is easier for testing. I comfirm the bug, but I think it has nothing to do with GSAP, it is a browser issue.

Just one thing to keep in mind ( not related to GSAP really ) You will have to do some htaccess redirection ( for example going to site.com/themen to redirect to site.com/index.html#!themen ) , then to catch the url hash and to do some initial scrolling

http://codepen.io/bassta/pen/yjiCb Here is my fork, basically I added TweenMax.fromTo(), setting current window scrollTop() as a starting position. Also, changed the code a little bit to reflect my style of coding

Weird, it gave me different result when I was testing. Good work man, will investigate it later.

Hi Dave, this is nice. But if, for example, you have five images and the second is broken it will execute onFail() handler, without trying to preloading the rest of the images. If somebody is interested, we can make lightwave jQuery image preload utility... Will be in help for a lot of people here.

Hi guys, Little bit late, but if it is help of anybody... Here is what I use when I want to preload sequence of images, or single image: First, simple loadImage jQuery method: $.loadImage = function(url) { var loadImage = function(deferred) { var image = new Image(); image.onload = loaded; image.onerror = errored; image.onabort = errored; image.src = url; function loaded() { unbindEvents(); deferred.resolve(image); } function errored() { unbindEvents(); deferred.reject(image); } function unbindEvents() { image.onload = null; image.onerror = null; image.onabort = null; } }; return $.Deferred(loadImage).promise(); }; This will return jQuery deferred, so we can do stuff like: $.loadImage(someimageurl).done(function() { initAnimation(); }).fail(function() { initAnimation(); }); ( for single image ) or $.when( $.loadImage("imagr1 url"), $.loadImage("image 2 url") ).done(function() { //some function }); ( for two/multiple images ) I prefer this, because it will also listen for image errors

Hi, you can apply easing to throwProps, see the documentation. Also, there is a slider based on TweenMax/Draggable that you can check on github that you can extend to use ThrowProps.

Hi, to run it automatically just set "paused" to false. To loop it set "repeat: -1". To make it faster/slower you can use timeScale method; Also note that repeat is property ot TimelineMax, not TimelineLite. Here is a pen: http://codepen.io/bassta/pen/LpaCl

http://jsfiddle.net/C3LZa/10/ Well, Sine is assigned to mt greensock global, so you have to use it like mt.Sine.easeOut

Hi, also my demo may come useful to you: http://codepen.io/bassta/pen/ikLsl

Hi, In such a scenario I would create a self-invoking anonymous function and pass TweenLite and SplitText as parameters (function( TweenLite, SplitText, undefined ) { //here you can use SplitText })(gs.TweenLite, gs.SplitText);

One thing you can do is to detect when tab is active or not, and to switch between RAF/setTimeout() window.addEventListener('blur', function() { TweenLite.ticker.useRAF(false); }, false); window.addEventListener('focus', function() { TweenLite.ticker.useRAF(true); }, false);

If you're on OSX, I would recommend iShowU ( http://store.shinywhitebox.com/ishowu-hd-pro ). It is paid, but worth its money.

Hi, it would be really great if you create a codepen example. One thing I could suggest you is to use TweenLite delayedCall method. $(element).on("mouseenter", function(){ TweenLite.delayedCall(1, function(){ slideUpTemplate.reverse(); }); ​});

Hi, Your problem is that you assign the timeline to the element with id of of a "box", but on the mouseenter event listener this points to the element with id button. You have to declare the timeline variable and then access it in the mouseenter event listener; Here is example how to to this: http://codepen.io/bassta/pen/Jbthk

Hi and welcome to forums, TweenMax.set() is basically a zero-duration tween. It will tween for zero seconds ( immediately rendering ) values that are tweenable. backgroundSize takes several options, from which some are tweenable ( like backgroundSize: 10% 50% ) and some are not ( like backgroundSize: cover ). I think TweenMax can't tween that value so it just fallbacks to some value that is tweenable, in this case 50% 0px ).