Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Clemeeent

Horizontal scrolling and triggering animation

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 post
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 post
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 post
Share on other sites

One way to do it would be to fix the slider. Note that I chose a large body height but it should probably be calculated based on the content in your actual project:

See the Pen YzqbGQZ?editors=0100 by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

How did I not think of this...!

Awesome, I achieved the initial effect thanks to your guidance!

Here it is if it answers your initial curiosity :)

 

Weirdly it stops working when deleting markers:true;

 

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

Edited by Clemeeent
Bug
Link to post
Share on other sites
18 minutes ago, Clemeeent said:

Weirdly it stops working when deleting markers:true;

That's because markers are added to the page far down. If you have other content that reaches that far or a set height on the body you don't need markers.

Link to post
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.

×