Simple ScrollTrigger SplitScreen

[lightyearz]

Hello, I want to create a simple ScrollTrigger split screen: On the left the background image should scale down while scrolling (which I successfully implemented) and on the right side, there should appear 3 pinned containers, each with 100vh, on the same position, one after another. Each Container should appear as long it would take to scroll down 100vh normally. As you can see, the 3 message containers don't behave as intended. 

I know, this might not be too complicated, but I haven't found something similar here in the forum. There some splitscreen tutorials on the Creative Coding Club Website (with staggered animations and so on), but they are a bit too complex for me now.   

 

See the Pen mdvVKow by Hans-H-Franck (@Hans-H-Franck) on CodePen

Edited October 28, 2023 by lightyearz
Typo

[Toso]

maybe if you want it simple as you say  for a start just pin one thing which is the wrapper because now you are pinning the img and pinning 3 other sections on the right this could be easier to work with, pin the wrapper and then create a single timeline for the animation 

 

also use scrub:1  to smooth things a little while scrolling 

[mvaneijgen]

Hi @lightyearz welcome to the forum!

 

Indeed as @Toso suggested it could be a lot simpler. If you find yourself creating multiple ScrollTriggers it is best to ask your self if you could do the same with just one. 

 

Personally I always like to start with an animation, because that is what ScrollTrigger is doing. It is just playing an animation on scroll. Pinning the #wrapper is indeed the best thing to do. 

 

I've removed some of your CSS, there is no need to create 300% height things, this will all be handled by ScrollTrigger. 

 

I've placed some comments in your CSS and JS to beter explain certain things, so be sure to read through them. So here is the animation, this will be what ScrollTrigger is animating on scroll by the visitor 

 

See the Pen XWOXoyq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

Check out this tutorial how to work with ScrollTrigger 

 

 

And then finally everything on scroll. Hope it helps and happy tweening!  

 

See the Pen gOqPZJa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

 

 

[lightyearz]

Thanks @Toso and @mvaneijgen for your kind replies. I really appreciate this! I have put the code from you @mvaneijgen into VS Code and played around with it. Already had some "Aha"-Moments! Thanks a lot for taking the time to not only give me a working solution but also adding some valuable, eye-opening comments!! 🙏

Even though I'm a quite good designer I'm not so talented when it comes to coding, for a long time I only had some mid-level CSS skills. But a few month ago I discovered GSAP, which quickly helped me achieve my first small successes, and because of this I finally found the courage to learn proper javascript, something I had been putting off for a long time.

The helpfulness and friendliness of this community really blows me away! Now I'm even more motivated to stay on track so that one day I can also write the word "Coder" on my flag!

[GreenSock]

13 hours ago, lightyearz said:

I'm not so talented when it comes to coding, for a long time I only had some mid-level CSS skills. But a few month ago I discovered GSAP, which quickly helped me achieve my first small successes, and because of this I finally found the courage to learn proper javascript, something I had been putting off for a long time.

The helpfulness and friendliness of this community really blows me away!

Aw, that's so nice to hear, @lightyearz! Made my morning for sure. Good luck with your learning journey. I started out as "just" a designer (zero coding skills whatsoever) and it was amazing what happened when I started understanding what's possible with code. There's a whole new level of creativity that it can open up. 💚