Opacity reversing when scrolling back up

[Icareg]

I've got a simple image that has a default opacity: 0 in my css. Halfway through the page I set the opacity to 1 with the following code:

                gsap.to(simpleImage, {
                    opacity: 1,
                    ease: 'none',
                    scrollTrigger: {
                        trigger: trigger1,
                        start: 'top 100%',
                        end: 'top 75%',
                    }
                })

When scrolling a bit more down I set the opacity back to 0 with the following code:

                gsap.to(simplmeImage, {
                    opacity: 0,
                    ease: 'none',
                    scrollTrigger: {
                        trigger: trigger2,
                        start: 'bottom 100%',
                        end: '100',
                    }
                })

When the simple image has opacity 0 I scroll back up but it's not reversing the second trigger. It only goes back to opacity 1 when I hit the first trigger. Why Is it not going back to opacity 1 in the second trigger by scrolling back up?

[Cassie]

Hey there!

 

Multiple scrollTriggers on the same element is usually not the right approach. I think this may be better with callbacks

 

Happy to help you find a solution if you can post a minimal demo? Just coloured boxes will do - no need for styling, just give me an idea of where you want to fade/show the element.

[akapowl]

1 hour ago, Cassie said:

Multiple scrollTriggers on the same element is usually not the right approach. I think this may be better with callbacks

 

While I think for certrain scenarios Cassie is definitely right with that (if by using the callbacks she doesn't already mean toggleActions), I think the missing piece in your puzzle only just might be those toggleActions, @Icareg

 

From the docs:

 

Quote

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

If you've gotten a bit into how those work, you will notice that when setting them properly in your example (the default will only play on enter and do nothing else on the other callBacks), things will probably work better already - although with your specific code you will also have to set immediateRender: false on that 2nd ScrollTrigger because it is trying to animate a property of an element that another instance was already tweening on before - see the most common ScrollTriggger mistake article.

 

And if you wanted to trigger something onLeave/onEnterBack with that second ScrollTrigger you might run into problems, because you have set the end to an absolute scrollposition of 100 - which would be a whole lot before its start actually. Now that doesn't matter in your case because you would probably only have to trigger onEnter and onLeaveBack - just wanted to point out to be careful about that, nonetheless.

 

See the Pen LYegxOr by akapowl (@akapowl) on CodePen

 

 

 

Now if the first fading in and then later fading out again is all you want to do with that image, you could also just do it with one single ScrollTrigger - which would make things a bit more concise. Having another look at the endTrigger property in the docs will help for that.

 

endTrigger

String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.

 

See the Pen MWrPJzo by akapowl (@akapowl) on CodePen