Bogomip

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

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

Hi akapowl, Thanks a lot, that does look a significant amount neater than what I had before. The timelines look much tighter than having the multiple calls as well. I appreciate both your time on this - bit by bit im learning Alex

Hi both! Thanks so much for your help - I have been loving using these tools but the start and end have been the only real bane of the process! These explanations help and I am so appreciative of your time! With respect to using '.panel-one' as the pin and the trigger it breaks the flow of the next part (not shown in the codepen for simplicity but is basically just 'panel-two' done in the same way as 'panel-one') - I think because using the class .panel-one seems to mean the page keeps scrolling. I.e. I scroll and immediately any content that comes after it seems to start moving. Pinning the ID works better for further page flow it seems. So I change the fade to: gsap.to('.panel-one__image', { opacity: 0, scrollTrigger: { trigger: '.panel-one', start: 'top top-=500rem', end: 'top top-=1000rem', scrub: true, markers: true , onUpdate: function(self) { console.log( self.scroll() ) } } }) If I change the trigger to the class .panel-one it does work but I am not sure why because if I am pinning the ID surely it is the ID panel-one that gets the extra padding.... So to summarize: - I need to pin the ID #panel-one to stop the next content on the page flowing upon scroll. - I need to attach the effects on the content inside #panel-one (the image and text) to the class .panel-one to make it work. I guess what I am now asking is, in this code: // panel one pin gsap.to('#panel-one', { scrollTrigger: { trigger: '#panel-one', start: 'top top', end: '+=1800rem', pin: true } }) gsap.to(['.panel-one__image', '.panel-one__text'], { opacity: 0, scrollTrigger: { trigger: '.panel-one', start: 'top top-=500rem', end: 'top top-=1500rem', scrub: true, markers: true , onUpdate: function(self) { console.log( self.scroll() ) } } }) Why does it work to pin the fade to the class .panel-one and not the id #panel-one? Thanks! Alex

Ok, so im new to GSAP and ScrollTrigger, and whilst I am getting comfortable with how to do 'it', I have a few questions which are causing me issues. The biggest is the relationship between the CSS, HTML and GSAP. If you look at the codepen attached, in the CSS I have basically set it up as if I were not going to animate it, and then used ScrollTrigger to do the animating and the scroll stuff. ScrollTrigger adds padding I believe which gives it the 'longevity' as you scroll. But this is where I am struggling. I feel like with the example I should have a panel-one height of 100vh (defined in css) + 2300 rem (the pin height of panel-one defined by 'bottom-=2300rem). Then, 1100rem scrolling into the page the image should start to fade, and have faded out fully within 100rem (quick). 1100 rem after this the pin should lapse and the page resumes scrolling. This code: // panel one pin gsap.to('.panel-one', { scrollTrigger: { trigger: '#panel-one', start: 'top top', end: 'top bottom-=2300rem', pin: true } }) gsap.to('.panel-one__image', { opacity: 0, scrollTrigger: { trigger: '#panel-one', start: 'top bottom-=1100rem', end: 'top bottom-=1200rem', scrub: true, markers: true } }) However it doesn't seem to work like this - I dont know if its how im writing the CSS, or how I am judging the size of the elements but things just dont happen when I expect them to. I have gotten by a little with trial and error but it seems like a poor way to properly understand (and takes a lot of time when trying to create complex animations). Any help or explanations are welcome, as are links to great 'start' 'stop' or layout using ScrollTrigger tutorials!

Hi akapowl, Much appreciated, as I am new to GSAP and for simplicity I just unpinned the animations and created a new pinned instance - made it easier to control and much easier for me to follow, thanks! This also solved the second problem, which you also explained and did work before I changed the pinning system - so thanks for that too. Thanks again! Bogo

Hi all, So i'm new to GSAP in general and came to it for ScrollTrigger. I've been working on my site as shown above but have run into a few questions: (a) This is more general. Lets says something is pinned, i'm having no problem animating that pinned item but as soon as the animation is done the pin desists and the page keeps on scrolling. Is there a way to make the animation occur and then have the item remain pinned without an animation for a certain distance scrolled before the next content? I go around this in some extent on my title by using expo.in as the ease, but that seems hacky and I would prefer this to work properly :-) (b) This is specific to the codepen.io listed. When you scroll down you get to a violet colored section which says 'You need to eat sausages', and then 'RIGHT NOW' flies in separately. This is working as intended (except for the problem of what I asked in a), but when you keep scrolling and the top of the viewport gets to the top of the RIGHT NOW container, the whole violet section jumps down to the center of the page. I checked in the common problems and there was a jumping issue but I struggled to see if it related to my problem. Thanks for any help :) Bogo