Jump to content
Search Community

Timeline question

Bogomip test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi all, 

 

So I have a timeline which is working, but I want to create an alternate stagger - i.e

 

- Stagger 1 triggers routine 1

- Stagger 2 triggers routine 2

- Stagger 3 triggers routine 1

... etc

 

So looking through the forums it seems like creating alternative but simultaneous staggers might be the way to go, i.e.
 

<div class="main-class main-class__1">Text</div>

<div class="main-class main-class__2">Text</div>

<div class="main-class main-class__1">Text</div>

<div class="main-class main-class__2">Text</div>

and then in GSAP...

 

p6tl.to('body', {})
    // other stuff
    .from('.main-class', { // the stagger that dictates the behaviour of the actual div
        stagger: 5, opacity: 0, duration: 3, x: 200, display: 'none', height: 0
    })
    .from('.main-class__1', { // set a stagger up on the first and third
        stagger: {  
            each: 10, // double speed to alternate
            onComplete: function() {
                gsap.to('.panel-six__arc--fp--count--background', {
                    // do stuff - changing a background in this case
                })
            }
        }
    }, "<") // set to start with the initial stagger
    .from('.main-class__2', {
        stagger: {  
            each: 10, 
            onComplete: function() {
                gsap.to(totalSpend, {
                    // do stuff 2 - animating a variable in this case
                })
            }
        }
    }, "+=5") // start after the first duration has passed and halfway through the duration of main-class__1

Which makes sense to me but the timing isnt working - the main-class come in, then the main-class__1 go then the main-class__2 go... in order. So it seems to me its the relative units im using on the timing of main-class__1  &__2 but its unclear here where I should proceed.

 

For completeness this is being used in conjunction with a scrolltrigger, set up as so:

const p6tl = gsap.timeline({
        scrollTrigger: {
            trigger: '#panel-six', 
            start: 'top top', 
            end: '+=3000rem', 
            pin: true, 
            scrub: true
        }
    })

Thanks for anything :)

 

Bogo

Link to comment
Share on other sites

  • Solution

It'd be really, really helpful if in the future you provided a minimal demo - it's just kinda tough to follow what exactly you want and then try to mock it up ourselves (at least in our minds) in order to then troubleshoot :)

 

I'm not sure I understand your goal, but I'm pretty sure the "+=5" position parameter is incorrect. Remember, that'll place it 5 seconds after the END of the timeline. It sounds like you wanted to place it 5 seconds after the START of the previously-inserted animation. Is that true? Perhaps you meant "<5"? 

 

It may also be good to use a totally different approach by thinking about the alternating in a different way - just create a timeline for one set, then a timeline for the other set, and then drop them into a master timeline in a way that offsets them slightly. 

master.add(buildSet1()).add(buildSet2(), 5); // offset by 5 seconds

That way, you can modularize your code much more cleanly for the different sets (in a function for each). 

 

If you still need some help, a simplified CodePen will go a long way toward getting you a solid answer. We'd love to help. 👍

 

Side note: end: '+=3000rem' isn't valid. You can only use px or % (not rem). 

  • Thanks 1
Link to comment
Share on other sites

Hi Jack, 

 

Yes, I appreciate the codepen might have been useful but as I was confident it was an issue with the relative placement in the timeline I had thought the problem would be obvious from the code snippet - sorry about that and that the question wasn't clear enough.

 

What you said was absolutely right though, as soon as I change the "+=5" to "<5" it all works perfectly and as expected! :) I thought the += was for from the previous item in the timeline, not the timeline itself - so something new learned!

 

Thanks again!

Bogo

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...