Jump to content
GreenSock

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

panych

Members
  • Posts

    12
  • Joined

  • Last visited

Posts posted by panych

  1. Can I combine multiple tweens and run them with one ease function? Something like this:

    var el = $('#some-element');
    
    var tw1 = new TweenMax.to(el, 1, {left: 100});
    var tw2 = new TweenMax.to(el, 1, {left: 200});
    var tw3 = new TweenMax.to(el, 1, {left: 300});
    
    var tl = new TimelineMax({ease:Power2.easeOut})
    .add(tw1)
    .add(tw2)
    .add(tw3);

    I've made sandbox examples for this issue:

    1.

    See the Pen qpjCK by panych (@panych) on CodePen


    2.

    See the Pen aLHGy by panych (@panych) on CodePen

     

    We need to make to move the box from the first example with one common easing function, as it has been shown in the second example, but without removing middle tweens.

     

  2. I've found a solution: use some kind of "Tween fabric"

    function getMoveRight() {
        return new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});
    }
    
    // Original timeline
    var moveRight = getMoveRight();
    
    // Child timeline, wich works like original
    var moveFarRight = getMoveRight();
    moveFarRight.to(el, 1, {x: 200});
    
    moveRight.pause(); 
    // moveFarRight didn't paused, so it will play

    It works well for me and I've already used this trick before, but forgot about it)

     

    Thanks Rodrigo and all GSAP team.

    • Like 1
  3. How can you put timeline into two different timelines and then have ability to play it separate as well as play "container" timelines?

     

    To clear what I meaning, here is an example of 4 timelines: 2 simple, 2 combined (also interactive example available on jsFiddle):

    var moveRight = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 0}, {x: 300});
    
    var moveLeft = new TimelineMax({paused: true})
    .fromTo(box, 1, {x: 300}, {x: 0});
    
    var moveRightLeft = new TimelineMax({paused: true})
    .add(moveRight.play()) // call `play` because timeline paused 
    .add(moveLeft.play());
    
    var moveLeftRight = new TimelineMax({paused: true})
    .add(moveLeft.play())
    .add(moveRight.play());

    In this example, when we'll try to play each timeline, only last one (moveLeftRight) will work. Why is it so? Can we somehow play any timeline?

     

    This question also posted on Stackoverflow

  4. Is there a way to clone timeline, so you'll be able to change it without causing original timeline?
     

    // Original timeline
    var moveRight = new TimelineMax().fromTo(el, 1, {x: 0}, {x: 100});
    
    // Child timeline, wich works like original
    var moveFarRight = moveRight.clone();
    moveFarRight.to(el, 1, {x: 200});
    
    moveRight.pause(); 
    // moveFarRight didn't paused, so it will play

     
    It's a little bit looks like classes and inheritence in OOP: basic timeline, child timeline.

  5. In this situation I've found two usefull workflows:

     

    1. Create small timelines and then put them into main paused timeline. 

    Limitation: you can't free add or remove child timelines - it will cause autoplaying.

    var childTl1 = new TimelineMax();
    childTl1.to(elem, 1, {top: -100});
    
    var childTl2 = new TimelineMax();
    childTl2.to(elem2, 1, {top: 300});
    
    
    var mainTl = new TimelineMax({paused: true});
    mainTl.add( childTl1 );
    mainTl.add( childTl2 );
    

    2. Create small timelines with `{paused: true}` and call `play` method when will putting them into main timeline.

    var childTl1 = new TimelineMax({paused: true});
    childTl1.to(elem, 1, {top: -100});
    
    var childTl2 = new TimelineMax({paused: true});
    childTl2.to(elem2, 1, {top: 300});
    
    
    var mainTl = new TimelineMax({paused: true});
    mainTl.add( childTl1.play() );
    mainTl.add( childTl2.play() );
    
  6. Appreciate for your deep explanation, its very helpful. Now that behavior is clear for me. 

     

    I work on presentation, which progress fully depends on scrolling, so I find only a `seek` method useful, that's why I ignored advises from @bassta (thank you anyway). Some results you can find here: http://deploy1.teobit.ru/  (I will update link when will finish project).

     

    Thanks

  7. The only way to control main timeline is a `seek` method in my case. So it's not an option. 

     

    I would like to know is this a feature or bug. If you can use `seek` when timeline paused, why you can't use it if this timeline is a part of another?

  8. Hello,
     
    I have a main timeline, which is paused and controlled by `seek` method. And I have a tons of small timelines, which I want easily add or remove from main timeline. If you create some timeline, but don't place it in main timeline with `{paused: true}`, it will auto play. To prevent this, I decide to set `paused: true` for each small animation. But in this case `seek` method doesn't work. 
     
    Example: 

    See the Pen zidBA by panych (@panych) on CodePen


    If you remove `{paused: true}` from childTl1 everything will work as I need.
     
    I find one way to solve this: use `play` method for each paused animation, which placed into main timeline.
     
    Is there something better or maybe another way to achieve needed result?
     
    Thanks

×