Christiemade

Beautiful, thank you!

I am trying to get a separate nav to show active items as you scroll through sections (separate elements). Right now the 'active' class is getting added to the elements being scrolled, but I want them to be added to the navigation items. What am I doing wrong here?

That's the magic right there. Thank you!

I have an announcement bar that lives overtop of a header bar, and I want the header bar to stay sticky once it reaches the top. This works fine, EXCEPT when you scale down the window. Then the announcement height changes, which changes how much the header bar needs to animate to reach the top. I got this ALMOST working, except now what happens is - if you load the window, then resize it smaller, then scroll down, everything is great, but the minute you scroll back up the variable that keeps the announcement bar height seems to reset itself and mess up the alignment of the elements on the page. I need help figuring out what I'm doing wrong here!

DOMContentLoaded did the trick. Thanks again!

Any blind guesses as to why, in my actual implementation I get these errors: gsap.min.js?ver=5.9:10 GSAP target .boxes .box not found. https://greensock.com ScrollTrigger.min.js?ver=5.9:10 Please gsap.registerPlugin(ScrollTrigger)

Wonderful, that is what I need. Thank you for your help and the explanation!

I want 3 boxes to fade in one after the other, but only after you've arrived in that section. In my test here, the boxes are in section3. The first box fades in, but the others don't. What am I doing wrong? (Note: The boxes can't have unique classes)

This is helpful yes, thank you!

I haven't been able to get it to work at all.... but I can get a structure set up for you. https://codepen.io/christiemade/pen/KKWyRvV

Say I have some text that stays fixed on the screen. I want multiple thing to happen to it as the user is scrolling. The divs that appear scrolling behind it are the triggers. I want to change things on the text like color and opacity. As Div #2 scrolls into view, the opacity changes from 0 to 1. As div #4 scrolls into view, the color changes from black to white. Do I need to create two different effects to do this?

Derp! Thank you! I would like to try converting to a timeline, as I think that makes the most sense, but I'm not sure where to put the different triggers. gsap.timeline({ scrollTrigger: { trigger: '.section02', scrub: true } }) .to('#img_2', { opacity: 1 }) .to('#img_2', { opacity: 0 }); Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers? ?

I am trying to figure out why my slides don't fade out nicely all the time. (Sometimes they do). In the example, #img_2 does not fade out, it just abruptly cuts away. (Code that should fade it out starts at line 21)

Nevermind, it looks like maybe I did figure it out Thanks for your help!

I am not clear how to use a timeline and also specify specific div positions....? It may not always be exactly the length of a section, it needs to be able to be specified precisely per animation. So, for example, if I wanted one of the zooms to start when section 3 was halfway up (top center) and end when section 4 was rolled through (bottom top), how would I do that? https://codepen.io/christiemade/pen/wvgRgmz