Jump to content
Search Community

Hero Parallax on scroll

Policsek test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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. :D

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

Link to comment
Share on other sites

  • Solution



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!

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...