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

I am just trying to, in this example, get this image to animate (zoom in) as you scroll down, but then also zoom back out when you scroll up. I also want the zoom to take exactly as long as it takes to scroll through section 3 to start and complete its animation. I put endTrigger: '.section4', In the code to tell it when to finish animating.

https://codepen.io/christiemade/pen/wvgRgmz

When I add an EndTrigger, it stops animating when reversed.

I do want the image to by default (when not zooming) be scaled to fit the screen (Width/height) - which is a lot easier to do when its a background image. So using this method I still have to add a bunch more code to do that part as well. Also, I do need it to be able to stop/end at very specific positions, too. Not just at each section. ?

My actual project is much more complicated, so I used the CodePen from another project just to speed up my making a simple example of what I am trying to do I think I can work with this, thanks!

I know I am doing this wrong I want to be able to target and change the zoom level of the #target div multiple different ways throughout the users scroll. How can I clean this up (and make it work?) Right now the second animation doesn't even animate, it just jumps.

What if you want it to be sticky across multiple divs, but also be able to reverse back up and stick then, too? (Section 2 stays sticky through section 3) https://codepen.io/christiemade/pen/eYgPQRL?editors=1111

If I wanted the fade to last the length of two separate divs, would I need to use timeline for that? Let's say we're animating something that is fixed over on the side of the screen. We want it to start to change opacity when div #2 comes into view, but not finish until div #4 comes into view (so its still animating all the way through div #3)

Thank you! I feel like that was way more informative than the docs.

What other options can go into start and end? For example, if I wanted it to reach 100% opacity when "start" was at the TOP of the screen? (Right now it gets to 100% when end is at the top of the screen). Or if I want it to get to 100% opacity when it was 50% of the way to the top of the screen?