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