weddje

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?

hi Zach, thank you for the suggestion. I've made it work now! It works like I intended. https://codepen.io/weddje/pen/BazvJwZ

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') } } });

awesome!! works perfect. thank you so much

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, } }) https://codepen.io/weddje/pen/BazvJwZ

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