Have Item Within A Timeline Keep Its End Animation State Even When Other Items With The Same CSS Class Animate In

[emilychews]

Hi,

 

I have a scrollTrigger which animates an image overlay in an out. During the animation when the image cover is at 100% width the image appears behind the cover so when the cover then animates out in the second part of the animation the image is revealed.

 

The problem I have is that when next instance of an image appears the scrollTrigger causes all of the images to disappear again because opacity 0 is set.

 

I'm trying to work out a way of having it so once each image instance appears it will then stay at opacity: 1 

 

Is there anyway of adding a CSS class via scrollTrigger so in my CSS I can have something like  .image.done {opacity: 1} or is there a better way of doing this?

 

The other part of the animation isn't affected because it is covered by theforEach() method that is tied to the scrollTrigger.

 

**Note: in the Codepen the 'image' is the blue inner box 

 

 

 

See the Pen LYRwQdV by emilychews (@emilychews) on CodePen

[ZachSaucier]

Hey Emily. You're making a variant of one of the most common ScrollTrigger mistakes - using a general selector when you should be using a more specific one. If you scope the blueInner variable to each section the issue should go away  

See the Pen MWbgWbN?editors=0010 by GreenSock (@GreenSock) on CodePen

[emilychews]

Thanks Zach.

[emilychews]

Actually Zach that isn't working. The blue square now shows at the beginning of animation. It's only supposed to show after the cover has animated away, so it's basically revealed as the overlay animates out. I encountered this problem when I tried setting the initial value in my CSS.

[ZachSaucier]

Ah, I see. Sorry I didn't understand the goal. And my code didn't really set things up the right way  

 

I'd loop through the containers and do it like this:

See the Pen rNWBWgg?editors=0010 by GreenSock (@GreenSock) on CodePen

[emilychews]

Thanks Zach