Scroll Trigger Start & End at the same place

[ziq]

I have recently tried the GSAP scroll trigger timeline to animate my footer. But I found out that my footer start and end are bine together at the bottom.

 

var tl3 = gsap.timeline({
  scrollTrigger: {
    trigger: ".home-footer",
    start: "top center",
    end: "bottom bottom",
    toggleActions: "play none none reset",
    markers: true,
  },
});

 

 

I am new to GSAP scroll trigger and have been finding this answer for so long, can anyone help me to solve this? Thanks.

 

 

See the Pen YzNXQBa by ziqinyeow (@ziqinyeow) on CodePen

[akapowl]

 

Hey @ziq - welcome to the forums

 

🤔 I guess that's related to that first. from() tween in your timeline - which sets the footer to be scaleY: 0 initially and is supposed to tween up from there, so your footer takes up no space in the beginning.

 

To work around that you could for example wrap all the content of your footer in a div (footer-inner in that following pen) and tween on that wrap instead.

 

Is this closer to what you thought of?

 

See the Pen d4cb0d0ff7348e76e892268682ca561c by akapowl (@akapowl) on CodePen

 

[akapowl]

 

Altenatively (and this might be simpler although maybe not the best way because it will really only trigger at the very bottom) you could keep the setup as you have it and just adjust the start of your ScrollTrigger with regard to the footer being 'collapsed' initially. I set it to 'top bottom' here for example:

 

See the Pen 7e8d8d3ddb1aae820af8fcbd23634c14 by akapowl (@akapowl) on CodePen

[ziq]

6 minutes ago, akapowl said:

 

Altenatively (and this might be simpler) you could keep the setup as you have it and just adjust the start of your ScrollTrigger with regard to the footer being 'collapsed' initially. I set it to 'top bottom' here for example:

 

 

See the Pen

See the Pen 7e8d8d3ddb1aae820af8fcbd23634c14 by akapowl (@akapowl) on CodePen

by akapowl (@akapowl) on CodePen

 

 

@akapowl 'top bottom' is really slick. Thank you so much, will be working hard to improve my understanding in Scroll Trigger, really appreciate your work!😁😆