Stacking section + footer reveal

[Bureau Blanc]

Hi,

 

I'm trying to combine stacking sections with a footer revealing from the bottom (under the last section).

I'm stuck with the last: the footer gets partially visible and the page snaps back to section 4.

Anyone how can help me out?

 

 

Thanks in advance!

See the Pen zYgZdmb by BureauBlanc (@BureauBlanc) on CodePen.

[mvaneijgen]

Currently you're creating around 10 ScrollTrigger which are all fighting for control with their own snapping. This could easily be build with just one ScrollTrigger and a timeline, if you think of the animation first before adding ScrollTrigger.

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 Hope it helps and happy tweening!