Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Chrysto last won the day on August 13 2014

Chrysto had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Chrysto

  1. 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.




    • Like 5
  2. 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. 

    • Like 3
  3. 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: 

    See the Pen tEarb by bassta (@bassta) on CodePen


    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;
    	"width" : listWidth + "px"
    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);
    $holder.on("mouseenter", function(){
    }).on("mouseleave", function(){
    //Show/Hide overflow - this is to see how it works, not needed actually
    $("#ov").on("click", function(){
    $("#oh").on("click", function(){

    If some part of the code confuses you, I suggest you to first read the documentation of TimelineMax.

    • Like 2
  4. 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. 

  5. 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. 

  6. 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() {
                    function errored() {
                    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() {
            }).fail(function() {

    ( for single image )



    $.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

    • Like 1
  7. One thing you can do is to detect when tab is active or not, and to switch between RAF/setTimeout() 


    window.addEventListener('blur', function() {
    }, false);
    window.addEventListener('focus', function() {
    }, false);
    • Like 3
  8. 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: 

    See the Pen Jbthk by bassta (@bassta) on CodePen

    • Like 2
  9. 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 ).