[ScrollTrigger, Target Separate Elements, In A Loop]

Beautiful, thank you!

[ScrollTrigger, Target Separate Elements, In A Loop]

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?

See the Pen wvgRgmz by christiemade (@christiemade) on CodePen

[ScrollTrigger with changing variable based on window Size]

That's the magic right there. Thank you!

[ScrollTrigger with changing variable based on window Size]

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!

See the Pen zYPWYwa by christiemade (@christiemade) on CodePen

[Animate 3 boxes in a row with Scroll Trigger]

DOMContentLoaded did the trick. Thanks again!

[Animate 3 boxes in a row with Scroll Trigger]

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)

[Animate 3 boxes in a row with Scroll Trigger]

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

[Animate 3 boxes in a row with Scroll Trigger]

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)

See the Pen KKWyRvV by christiemade (@christiemade) on CodePen

[ScrollTrigger, Timeline, Effects? Animate same text during scroll]

This is helpful yes, thank you!

 

[ScrollTrigger, Timeline, Effects? Animate same text during scroll]

I haven't been able to get it to work at all....  but I can get a structure set up for you.

 

See the Pen KKWyRvV by christiemade (@christiemade) on CodePen

[ScrollTrigger, Timeline, Effects? Animate same text during scroll]

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?

[ScrollTrigger Opacity Animation]

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? 🤔

[ScrollTrigger Opacity Animation]

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)

See the Pen ZELwZMm by christiemade (@christiemade) on CodePen

[ScrollTrigger with background image zoom, multiple triggers]

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

[ScrollTrigger with background image zoom, multiple triggers]

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?

 

See the Pen wvgRgmz by christiemade (@christiemade) on CodePen

[ScrollTrigger with background image zoom, multiple triggers]

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.

[ScrollTrigger with background image zoom, multiple triggers]

See the Pen wvgRgmz by christiemade (@christiemade) on CodePen

[ScrollTrigger with background image zoom, multiple triggers]

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

[ScrollTrigger with background image zoom, multiple triggers]

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.  🤔

[ScrollTrigger with background image zoom, multiple triggers]

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!

[ScrollTrigger with background image zoom, multiple triggers]

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.

See the Pen RwKqMVN by christiemade (@christiemade) on CodePen

[make element fixed/absolute when div appears on screen]

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)

 

See the Pen eYgPQRL?editors=1111 by christiemade (@christiemade) on CodePen

[ScrollTrigger - Duration]

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)

[ScrollTrigger - Duration]

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

[ScrollTrigger - Duration]

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?