Share Posted October 1, 2020 Hi fantastic people of Greensock! I'm a big fan, and a shockingly green member. I'm wrapping my head around ScrollTrigger, and I'm trying to achieve an effect like the one here: https://www.easytigerfilms.fr/en/actualites My codepen demo only deals with one image for now. I've pinned the images so the basic overlay effect works when scrolling down, but when I scroll up (logically), the translation occurs backwards. I'm stuck there: I don't know if I should use disable()/enable(), create two triggers, toggle classes.. I would like the active image to stay fixed in the frame while the following image translates on top, no matter if it comes from above or below. If you have any idea of how I could get there and what I'm missing, that would be highly appreciated! Kindly, Hugo. See the Pen abNMeYp by smoothdev35 (@smoothdev35) on CodePen Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 Hey Hugo and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership! I wouldn't use scrubbing at all in this case. I'd set it up to have one ScrollTrigger for each of your sections on the right. In the onEnter and onEnterBack callbacks you play an animation to show the image for that section. Simple See the Pen eYZwvNP?editors=0010 by GreenSock (@GreenSock) on CodePen The only thing left to do is fix the CSS/pinning. I recommend having all of the images in a container, pinning the container for the proper duration of the scroll section to its right, and absolutely positioning the images so that they are layered. You probably also want to change the zIndex of the image that's currently being animated so it's on top. I'll leave that as an exercise for you but feel free to ask if you run into anything you can't figure out. 2 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 Thank you so much for the quick and detailed answer! I'm getting right on that! Link to comment Share on other sites More sharing options...
Share Posted October 1, 2020 Ah, I see from your Twitter post that you're trying to recreate this website. I'd set that up a good bit differently than the demo above. I'd create one big timeline that does all of the image transitions (i.e. clipping) one after another. Then I'd hook that timeline up to a single ScrollTrigger that goes for the duration of the sections. In their case they just fixed the position of the image container but if you need "regular" content above or below you could just pin it instead. 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 1, 2020 Thanks! I'm going to try and get the first timeline right before anything! Link to comment Share on other sites More sharing options...
Author Share Posted October 2, 2020 19 hours ago, ZachSaucier said: Ah, I see from your Twitter post that you're trying to recreate this website. I'd set that up a good bit differently than the demo above. I'd create one big timeline that does all of the image transitions (i.e. clipping) one after another. Then I'd hook that timeline up to a single ScrollTrigger that goes for the duration of the sections. In their case they just fixed the position of the image container but if you need "regular" content above or below you could just pin it instead. Hi! This is obviously a little more complex than what I can do so far, so could you enlighten me just a little bit? What exactly do you mean by 'clipping'? Are you referring to the sequencing of transitions in the timeline, or to the the image transitions themselves? As for hooking the tl up to a single ScrollTrigger, I'm a bit confused about how to use a single scrolltrigger for all the sections, and how to pass the duration of the sections as a parameter for my tl. I'm trying to wrap my head around the whole thing because I want to achieve it, thank you very much for your help! Link to comment Share on other sites More sharing options...
Share Posted October 2, 2020 3 hours ago, Hugo Priet said: What exactly do you mean by 'clipping'? See how the images aren't being scaled or (visually) translated? Instead the images are "cut off" or clipped. That's what clipping is. You can clip images in multiple ways. One is using CSS clip-paths but they don't have great support and aren't the most performant to animate. You can also use <canvas> which is what the site you linked to is using. You can also use DOM elements where you have a container with overflow: hidden and use translations to make it clip. 3 hours ago, Hugo Priet said: I'm a bit confused about how to use a single scrolltrigger for all the sections Why is that? If you have tweens for a given section, just sequence them in a timeline and apply that timeline to a ScrollTrigger. 3 hours ago, Hugo Priet said: how to pass the duration of the sections as a parameter for my tl. When you are using scrub (like what the site you linked to uses) duration itself doesn't have much meaning. Instead it's more so about the proportion of the durations in respect to the entire duration of the timeline. See this part of the docs for more details. 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 2, 2020 Thank you very much for your patience! I knew about basic clipping, but I hadn't tried to make a whole sequence using it. I'll come back to you and show the final result! Link to comment Share on other sites More sharing options...
Share Posted October 3, 2020 Hey @Hugo Priet This thread is more or less a journey to roughly the effect, that you intend (my last two answers in there might be of interest for you) I later on worked up a polished up version of that. And now after flying over this thread and seeing your initial example on that website, I added an inverted version of the image ScrollTrigger(s) to it. Animation-wise, I am basically just tweening on the height of the elements that have background-images set via CSS. Maybe this can serve as inspiration to you (if you can look past the smooth-scrollbar integration and all the commented out stuff - which is a lot). See the Pen 283e6cc8dfedb8499b89916466ff62ac by akapowl (@akapowl) on CodePen Hope this helps a bit. Cheers Paul 5 Link to comment Share on other sites More sharing options...
Author Share Posted October 3, 2020 Hi @akapowl! Thank you very much for taking the time to share your work with me, it's definitely going to be very helpful for me! Cheers, Hugo 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 4, 2020 Hi @ZachSaucier! As simple as the underlying logic might seem in the end, it took me some time to understand how to animate clipping with the hidden overflow containers and translations! Here's the finished demo pen (second image and polishing coming later in prod), let me know if there are apparent issues in my implementation: See the Pen abNMeYp by smoothdev35 (@smoothdev35) on CodePen Thanks again for helping me get there! Cheers, Hugo. 3 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