Jump to content
GreenSock

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

Lasercode last won the day on November 21 2012

Lasercode had the most liked content!

Lasercode

Members
  • Posts

    46
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by Lasercode

  1. Hi guys,

    this is how i normally created my loops in my banners before gsap3:
     

    // ... 
    tl.addCallback(function(){
      if(loopCount < 3){
        loopCount++;
        // fade out elements
      }else{
        tl.pause();
      }
    });

    Now, that addCallback is not present anymore I use "call()", but the ad does not loop correctly, but only two times. Is "call" not being processed in every loop of the timeline?

    This would be my whole timeline. Also notice the "tl.to({}, 0.1, {});" in the end, which is needed to avoid a flickering when looping. This was not the case in gsap2 as well.
     

    var loopCount = 0;
    var tl = new TimelineMax({paused:true, repeat:-1});
    tl.timeScale(1.2);
    
    
    
    //fr1
    tl.from('#logo', 1, {scale:1.2, opacity: 0 });
    tl.to({}, 2, {});
    tl.from('.line, .line2', 0.2, { opacity: 0 });
    tl.to('.cls-1', 1.2, { 'stroke-width': 102 });
    
    //fr2
    tl.from('#bg-blue', 3, {opacity: 0}, 'kaas')
    tl.from('#stuk1', 0.2, {opacity: 0}, 'kaas');
    tl.from('#shop',  0.5, {y: 50, opacity: 0, ease:Back.easeOut},'kaas');
    tl.from('#stuk1_shade', 0.2, {opacity: 0}, 'kaas');
    tl.from('#stuk2r',  1.3, {x: -72, opacity: 0, ease:Power4.easeOut}, 'kaas');
    tl.from('#stuk2l',  1.3, {x: 72, opacity: 0, ease:Power4.easeOut}, 'kaas');
    tl.from('#stuk3r',  1.5, {x: -121, opacity: 0, ease:Power4.easeOut}, 'kaas');
    tl.from('#stuk3l',  1.5, {x: 121, opacity: 0, ease:Power4.easeOut}, 'kaas');
    tl.from('#stoerer', 0.5, {scale: 0.5, opacity: 0, ease:Back.easeOut}, 'kaas+=1.2');
    
    tl.to({}, 1, {});
    
    tl.to('#stoerer', 0.2, {scale: 0.95, yoyo: true, repeat: 3});
    
    tl.to({}, 2, {});
    
    // loop
    tl.call(function(){
      if(loopCount <= 5){
        loopCount++;
        tl.set('.cls-1', { 'stroke-width': 14 });
        tl.set('.line, .line2, #logo', { opacity: 0 });
        tl.to('#frame2', 0.5, {opacity: 0});
      }else{
        tl.pause();
      }
    });
    
    tl.to({}, 0.1, {});

    What am I doing wrong? 
     

    Thanks!

  2. Hey, thanks for the fix.

    Smart ass comment: I noticed that your initial gradient flips once you hover. Not that important, I admit ;).
    But if you wanna fix that too, the error is that you use "to top" in your colorize function, but then use the top param first, and then the bottom one. If you switch them, it's fine and dandy:

     

    function colorize(element) {
      //apply the colors to the element
        TweenLite.set(element, {backgroundImage:"-webkit-linear-gradient(top," + colors.bottom + ", " + colors.top + ")",background:"linear-gradient(to top," + colors.bottom + ", " + colors.top + ")"});
    }



    (Even less imporant: I am a humble member since '12, but thanks for welcoming me :D )
     

    • Thanks 1
  3. Hey there,

    Title says it. I know I read it somewhere some day... But I cant find what I search, so sorry to open a potential duplicate thread :/

    Let's say I got a for loop creating 80 elements, as particles. 

    Now I want them all to have the same starting point, but different end positions/speeds via Math.random() or so.
    After the "explosion", I would like to move the particles again for some pixels in Z direction, after a break.

    So: I like to have an explosion, then particles slow down and freeze, then animate again randomly, freeze again, and repeat - always with random positions.

    Could someone tell be the best dynamic approach with GSAP? I dont know how to handle this right..
    And sorry that I can't provide a codepen, it would just be chaos ;)
    Thanks!

     

  4. Hey Carl,

    I see.. While writing a longer text to explain the neccessities, I realized that my way of organizing the timeline is probably just wrong.
    I am more of a creative than a coder and I got used to use ONE timeline, where I use the position param mainly for keyframe names to define animation "blocks" and add delays inside those blocks (like "start+=0.5" or "state2-=0.3" etc). The "wait" would then make things easier to divide into animations and pauses, if you get my thought. My creative mind makes a difference between times where stuff happens and where nothing happens. And it's way better to read a "wait" in the tween chains.

    But okay. I can really use blakes prototype function then.
    If I get things right, the main fault of mine is, that my "blocks" of animations (like former movie clips in Flash) should probably be split into different timeline objects, but I got a question here, just to understand how to do things right:

    Can I chain timeline objects, and can I make use of the position params in the same manner like in Tweens?

    Like having tl1 and tl2 being TimelineMax objects and then just chaining them easily to get one whole animation with a break of X seconds in between them?

    It's not easy to explain for me, so please ask, if something sounds weird.

    Thanks so much.

  5. Thanks mate.

    I would strongly recommend adding this to the lib to be honest. It seems like a very small effort for a very high user convenience, and I even used wait functions in flash already. It definitely is something very very common in programming animations. Especially in banner animations.

    I didnt find a sticky/pinned feature request thread, so could you pass this issue or shall I open a new thread?

    Cheers

  6. Hey there,

    if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write 
     

    tl.to({}, 2, {});
    

    But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind.

    Thanks for some input.

  7. Thanks for the quick reply. I used custom ease before though, and I knew that I don't need the EasePack. I wanted to try it in addition to see if it changes something, which it didnt.

    If I remember and got you right, all I need to do is to use the tweenmax import link (for example the one from the download page)?
    https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
    Because that's not working too (locally tested - not in codepen)
    I also downloaded the bundle now and imported your tweenmax lib locally. No success. Still "CustomEase is not defined"..

    Could you have a further look please as I think I did not make a mistake.. I think :)

    Additionally.. Maybe it's a good idea to add a quick note about it here?
    http://greensock.com/ease-visualizer

    Thanks

  8. Hey there,

    I am pretty sure, someone asked this before and it's explained somewhere. I just don't find it.

    In the provided codepen, please check the JS imports. It's only TweenLite.
    Why doesn't it work like this?

    I tried importing TimelineMax only, too, then added a

    var tl = new TimelineMax();

    Nope...

    How can I make good use of the smaller libs?

    Thanks guys,
    Laser

    See the Pen meQKxw by anon (@anon) on CodePen

  9. Cool idea. Nice plugin. 

    You just had one mistake in your script, because when you set dots.reverse() a second time in the same timeline, it naturally RE-flips the array. So with only one it did the trick, nearly! But then I need to flip it again. So: no flip on original animation, then flip at every animation..hmm...

    Updated codepen here:

    See the Pen tJHDu by anon (@anon) on CodePen

     

    The mistake happens, when you roll out of a button and over the same button again. Brain -> knot.

  10. Hi,

    I thought this is gonna be easy, but I dont get it working.

    I got several <li> elements in a row that I put into an array called dots. And I got two hover areas (first and last list item). Those dots are initially being animated like this:
     

    var dots = $('.lights li').not(':first').not(':last');
    var dotsTL = new TimelineMax({ repeat:-1 });
    dotsTL.add( TweenMax.staggerTo( dots, 0.3, {scale:0.1}, 0.05));
    dotsTL.add( TweenMax.staggerTo( dots, 0.2, {scale:1}, 0.1));
    

    Now on 'mouseenter' over a hover area, I'd like to reverse the timeline - but I want to let it run infinitely until the user rolls over the other hover area and then again reverse it (to normal so to say). But if I use 'reverse()' then I only get as many animation run-throughs as there are being played 'forwards' and then it stops.

    It's kind of a Knight Rider K.I.T.T. animation that can be reversed on hovering over one of its head lights ;)

    How can I achieve this?

    Thanks a lot!

  11. Hi Jonatron ;)

    That is very nice of you. Unfortunately I cant just extract the HTML/CSS stuff, as this project is rather large, worked with compass and grunt, many dependencies (and different SCSS files), and I am just the guy for the animations and interactions. So I am very sorry not to be able to provide the needed codepen. Additionally I am under extreme time pressure, which makes it finally impossible. :(

    I didnt get the chrome stuff you talked about (after activating the flag), seems interesting though..
    I will check out the CSS hints of yours and definetely get back in touch if I get any results.

    *marked unsolved again*

     

×