[trying to animate different elements. On the right track but is there a simpeler way?]

Hi, I'm trying to animate different elements individually with scrolltrigger (h1, h2, h3, p etc) when entering the viewport. So when h3 comes into the viewport it animates, then paragraph text comes into the viewport and animates etc.  I'm on the right track, but I think this can be done in a simpler way. Can anyone advice?

See the Pen gOLpGbZ?editors=1010 by weddje (@weddje) on CodePen

[can I add a 'toggleClass' function in a scrolltrigger when the scroll direction changes?]

hi Zach, thank you for the suggestion. I've made it work now! It works like I intended.

 

 

 

[can I add a 'toggleClass' function in a scrolltrigger when the scroll direction changes?]

On the animated header I'm trying to make it appear on scroll down instantly. Even when I'm scrolled down to the bottom of the page. Currently it appears only when scrolling almost to the top of the page. In the example code below I'm trying to have a toggleClass() when the scroll direction is changed. But it's not working. Some advice is much appriciated  

 

example code:

var scrollUp = document.querySelector('.jwpnavbar--up');


ScrollTrigger.create({
  start: 'top -50',
  end: 99999,
  markers:true,
  toggleClass: {className: 'jwpnavbar--scrolled', targets: '.jwpnavbar'}
});

ScrollTrigger.create({
  start: 'top -300',
  end: 99999,
  toggleClass: {className: 'jwpnavbar--up', targets: '.jwpnavbar'},
  onUpdate: ({direction}) => {
    if (direction == -1) {
      scrollUp.toggle('.jwpnavbar--scrolled')
    }
  }
  
});

 

See the Pen BazvJwZ by weddje (@weddje) on CodePen

[Problems Creating Sticky Nav]

awesome!! works perfect. thank you so much

 

[Problems Creating Sticky Nav]

Hi Zach, I've added a second trigger, but this one is not triggering:

ScrollTrigger.create({
  start: 'top -50',
  end: 99999,
  toggleClass: {className: 'jwpnavbar--scrolled', targets: '.jwpnavbar'}
});


gsap.from(".jwpnavbar--scrolled", {
  position:"absolute", 
      scrollTrigger: {
      trigger:".jwpnavbar--scrolled",
      start: 'top -300',
      end: 99999,   
    }
}) 

See the Pen BazvJwZ by weddje (@weddje) on CodePen

[Problems Creating Sticky Nav]

Hi Zach, thanks for this nice navbar code! 

If I want to make the navbar unstick after scrolling down 300px, do I create an extra scrolltrigger for that? example here: https://facultydept.com/esteban-del-rio

 

thank you,

joost