Fade sections with ScrollTrigger - problem scrolling up

[kuglix]

I'm trying to animate a page with multiple sections. When scrolling, the area should be blended directly (no vertical movement). It works correctly when scrolling down (see demo). It just doesn't fit when scrolling up. What am I doing wrong?

 

Thanks in advance!

See the Pen GRoqmWb by kuglix (@kuglix) on CodePen

[GreenSock]

There were a few problems: 

1. You were pinning the SAME element multiple times which wasn't feasible in version 3.3.1, but it is in the most recent release, 3.3.3. 
2. If you're trying to crossfade sections like that, you need to set things up differently, like position: absolute and stack all the sections on top of each other and then use a GSAP animation to get all the effects (in a timeline).

Here's what I assume you were looking for: 

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

 

Quite a bit simpler than what you had too. 👍

 

Does that help? 

[kuglix]

Thank you Jack, it works like a charm!