Animated sections (observer demo) - animation only from second section

[Deadlift79]

Hi there,

 

I'm using the Observer demo and struggling to find a way to make header and footer appears on all sections except for the first one.

Basically I'd like that they appear scrolling down in section 2, then they stay fixed until the end of the scroll.  When you scroll the page up they stay fixed until the first section where they disappear like the start.

 

I've only added:

 

if (currentIndex >= 0) {
      gsap.to(items,{ autoAlpha: 1, zIndex: 3});
  }  

 

But of course is working only scrolling down  because the complex (for me) logic behind the starting demo.

 

Thanks!

See the Pen xxBBrrZ by Deadlift79 (@Deadlift79) on CodePen

[mvaneijgen]

I would create a timeline for your header and footer animation and set it to paused: true. Then check based on currentIndex if you're at the frist slide or the last slide and then call .reverse() on that timeline and on any other slide call .play(), I've moved the if () logic to underneath the currentIndex = index; so that the values are between 0 and the amount of slides.

 

Codepen is currently down, so I can't fork your pen. (will try later if it is fixed). Here is the code that I made it work for me 

// Create the timline somewhere beneath your js variables
const htl = gsap.timeline({
  paused: true,
});

htl.to(items, { autoAlpha: 1, zIndex: 3 });

// then under 
currentIndex = index;

// Add the folowing code 
if (currentIndex === 0 || // Reverse if we're at the frist slide OR!
    currentIndex === sections.length -1) {// Reverse when we're at the last slide
  htl.reverse();
} else { // Any other slide call .play() on the timeline
  htl.play();
}

 Hope it helps and happy tweening! 

 

Codepen is back up! 

 

See the Pen mdooOzr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

Edited February 18 by mvaneijgen
Placed pen link

[Deadlift79]

It solves perfecty my issue, really helpful, many thanks!

I've only changed the last part to adapt to my starting idea.