Hero Parallax on scroll

[Policsek 5 Likes (Newbie)]

So, what I am trying to achieve is that when I scroll, the .images-container should be "behind" the hero and it's " blocked/pinned/it doesn't move down ". When the hero is completely out of the viewport, only then the .images-container should "unblock" and you can actually start scorlling to see the next gray rectangles. Right now, the .images-container comes from bottom of the viewport. It should be already there.

 

To be more clear, imagine that I don't have the .hero element. Just comment it out in html and js. As you can see, .images-container is already in viewport and you can scroll down ( nothing crazy ). Now, what I want to achieve is that if I add the .hero element, as I scroll down the .hero element leaves the viewport and .images-container is revealed ( like a mask or like a curtain ). When the .hero element is out of viewport, only then you can start " scrolling " as you would normal do if there was no .hero element.

 

I know I didn't make myself clear, but I tried as much as I could.

See the Pen dyjZNvR by bogdan-florin (@bogdan-florin) on CodePen

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

This is more about CSS and positions than anything else. You need to create an animation for moving the hero off the screen and control that with a ScrollTrigger and also another ScrollTrigger instance that pins the content behind the hero. Both ScrollTrigger instances should end at the same time.

 

Here is a live example:

See the Pen bGjYgJP by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!