Slide in Directions

[TGC]

Hi,

 

I'm new to GSAP and I've been going through the CodePen examples to try and replicate this site (https://redlight.dev/) slide animations.

 

OnScoll down I want to be able to slide each side in different directions to reveal.

 

Thanks

[Cassie]

Hi there, welcome to the GSAP forums!

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites.

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

Here's a collection of scrollTrigger pens that may serve as inspiration
https://greensock.com/st-demos/

And this is a great video

 

https://player.vimeo.com/video/422191943?h=560c78ac9f&app_id=122963

[TGC]

Thanks Cassie, I appreciate the response to this.

I have been through a few tutorial videos and I'm currently stuck.

I created a minimal demo:

See the Pen GRyVYRO by CodeKnightTGC (@CodeKnightTGC) on CodePen

 

I just need to figure out how to get the left blocks to slide down instead of up when I scroll.

 

[OSUblake]

Hi TGC,

 

I would recommend ignoring anything scroll related at the moment, and just focus on figuring out the animation first. If you can make it work with a timeline, then all you have to do is hook up ScrollTrigger. I gave similar advice here. It's much easier to approach as an animation problem and not a scrolling one.