Bogomip Posted May 1, 2021 Share Posted May 1, 2021 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 More sharing options...
Solution GreenSock Posted May 2, 2021 Solution Share Posted May 2, 2021 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). 1 Link to comment Share on other sites More sharing options...
Bogomip Posted May 2, 2021 Author Share Posted May 2, 2021 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 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 2, 2021 Share Posted May 2, 2021 Excellent! Glad that resolved things. Yeah, "+=" is relative to the END of the timeline. Good luck with the rest of the project. Happy tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now