Jump to content
Search Community

Horizontal scrolling and triggering animation

Clemeeent test
Moderator Tag

Recommended Posts

Hi!

I've been lurking at GSAP for a while now and just started working on something to give it a try. I'm trying to achieve a fairly simple effect based on horizontal scrolling. 

The idea is to have an #intro that would slide out first, from right to left, and when it's out of the viewport, scroll through the whole .container.

Something like this, but horizontally : https://codyhouse.co/demo-tutorials/revealing-hero-effect/index.html

I believe I understand the different properties of ScrollTrigger but can't make up my mind for the right way of doing so... Especially since it's pretending to be horizontal scroll — I'm struggling to use start/end properly and trigger animation when I actually want them to trigger?

 
Here is the "to-do" I'm picturing:

1 -  Have the .container pinned

2 - Scroll through the #intro thanks to scrub
3- Unpin .container when #intro is out of the viewport (end: -=50%)

 

Since some of my objects are full screen, I can't really use their position to trigger stuffs. Therefore, shall I use an empty absolute div to act as a set trigger?

 

Do you see another way, a better way of doing so? 

 

All my "modules" will be the same size if it changes anything, but I don't know how many there will be. Therefore, I like the dynamic calculation.

 

Any help greatly appreciated :)

 

C.

See the Pen jOqJrrx by clemeeent (@clemeeent) on CodePen

Edited by Clemeeent
Missing info
Link to comment
Share on other sites

Hey Clemeeent and welcome to the GreenSock forums.

 

I'm not really understanding your end goal. Is something wrong with the demo that you posted? Or are you just looking for improvements to your code?

In case you haven't seen them already, there are several horizontal scroll sections in the ScrollTrigger docs. There's also thread thread which is very related. I think that reading through them you'll get what you need? If not, please let us know what you can't figure out :) 

 

 

Link to comment
Share on other sites

Hey Zach,

I didn't see this example - very good one, thanks for this.

The only thing I'm not understanding is how to pin the first slide since they are all already pinned to each other.

 

From this example, you can see that there is an intro (I'm guessing absolute or fixed with z-index) that scrolls normally and reveals the content behind which starts scrolling after the first one is out of the window

 

Simply put, how would you delay the the horizontal scroll to happen after 500px or so have been scrolled? So I can have the first animation (scrolling the intro away from the screen) set before.

 

Many thanks,
C.

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