Jump to content
GreenSock

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

Michael71 last won the day on July 24 2014

Michael71 had the most liked content!

Michael71

Members
  • Posts

    139
  • Joined

  • Last visited

  • Days Won

    5

Posts posted by Michael71

  1. Yes exactly something like this.

    Can I also get the current speed? so I can gradually decrease it? 

     

    This is for a loader which I'm not sure when it will finish, so I want to keep making it go slower so it doesn't end, and when it is complete to bump it to the end.

  2. It is not extremely difficult to achieve something like this.

     

    You could try and attach some logic into the resize event.

    $(window).resize(function(){
       // resize container here
    });
    

    Then for the slider you could setup your animation to animate left/right according to the full-width of the browser. Like follows:

    // sliding right to left
    function slideNext(){
       TweenMax.to(container, 1, {marginLeft: "-="+$(window).innerWidth()});
    }
    
    // sliding left to right
    function slidePrev(){
       TweenMax.to(container, 1, {marginLeft: "+="+$(window).innerWidth()});
    }
    

    *Provided that the "containers" inside the main slider span for the full browser width.

  3. You can capture the scroll event with:

    $(window).scroll(function (e) {
    var $top = $(window).scrollTop(); // how many pixels scrolled from top
    });
    
    

     And then do some calculations and apply a tween

    TweenLite.to(".obj", 0.5,{autoAlpha:0});
    

    And the reverse of that, if you need to fade-in when the user scrolls back again.

     

    But if you are looking for some more complex animations I would suggest: http://janpaepke.github.io/ScrollMagic/

     

    Which uses GSAP at its core and gives access to many cool effects that are based on scrolling.

    • Like 1
  4. To import images for a non-pro account you can use free hosting websites like photobucket and link them from there as they provide a url to use as image source, and it works for cross-domain linkage.

     

    For the fill you can fill the outer element like this: 

    TweenLite.set("path1",{fill:"#ff0000"});
    

    And the inner like this for transparency (I haven't tested this on svg but it should work I guess)

    TweenLite.set("path-inner",{fill:"rgba(255,255,255,0)"});
    
  5. The duration of the tween is extremely fast to practically capture the active state.

    Have you tried this scenario with a duration of 2-3 seconds? So that the click is properly triggered while the tween is animating?

     

    Also where is the "next" class added? Is it ever going inside the first "if" statement?

     

    You could post a codepen example, so that we can test and apply different solutions.

  6. Try this:

    var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut});
    
    $("#button").on("click", function(e){
     if(tl.isActive()){
     e.preventDefault(); // this will also stop <a> tag links
     e.stopImmediatePropagation(); // this will stop event bubbling
    
     return false;
    }
    });
    

    Basically you need to check if the animation is running from inside the event trigger callback and cancel it.

  7. You can use the event that gets passed by default inside the click handler

    $(".ss").click(function(e){
      var selectedItem = $(e.currentTarget);
      t.to(selectedItem, 4, {rotation: 360, ease:Bounce.easeOut});
      t.play();
    });
    
    

    Mind that reverse is applied to the whole timeline effect, if you want individual tweens that can be reversed you might want to try TweenMax/Lite.

    • Like 3
×