Clemeeent Posted September 28, 2020 Share Posted September 28, 2020 (edited) 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 September 28, 2020 by Clemeeent Missing info Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 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 More sharing options...
Clemeeent Posted September 29, 2020 Author Share Posted September 29, 2020 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 More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 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 comment Share on other sites More sharing options...
Clemeeent Posted September 29, 2020 Author Share Posted September 29, 2020 (edited) 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 September 29, 2020 by Clemeeent Bug Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now