Solution Nephtys Posted August 4, 2022 Solution Share Posted August 4, 2022 Hello Scrollers ! First time I ask for some help on the forum, but I'm a bit stuck at the moment with my portfolio's slider. The idea is to have the thumbnail on the left, and the infos on the right. Everytime the user scrolls 100vh, the thumbnail and the infos change. See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen I found this codepen, which is close to what I am trying to achieve, but I still have three problems : I don't understand how, but the right side of the animation doesn't work properly. The first element should be at top:0 when the animation starts ; When the user scrolls, my element starts by going down, and then up, but it should directly go up ; I cannot figure out how to pin the right element until the user scrolls 100vh everytime + I don't understand why the other elements are still in opacity: 0, and not visible on screen. If anybody could enlighten me, it would be nice ! Thanks, A GSAP newbie See the Pen oNqqoKX by chrysacier (@chrysacier) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 4, 2022 Share Posted August 4, 2022 Hi @Nephtys welcome to the forum! With ScrollTrigger it is best to first focus on the animation. Just write your logic in a timeline and after that works like you want to add ScrollTrigger to it. This way you split up the work and you can focus on one thing at a time. A ScrollTrigger starts at a certain position and ends some where, if you want to have something happen every 100vh you'll have to set the `end:` to something like trigger to: 100vh * number of elments and space your animation on that logic. Also take a look at `yPercent` instead adding a percentage to `y`. See the Pen dymmdxw?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Nephtys Posted August 4, 2022 Author Share Posted August 4, 2022 1 minute ago, mvaneijgen said: Hi @Nephtys welcome to the forum! With ScrollTrigger it is best to first focus on the animation. Just write your logic in a timeline and after that works like you want to add ScrollTrigger to it. This way you split up the work and you can focus on one thing at a time. A ScrollTrigger starts at a certain position and ends some where, if you want to have something happen every 100vh you'll have to set the `end:` to something like trigger to: 100vh * number of elments and space your animation on that logic. Also take a look at `yPercent` instead adding a percentage to `y`. Hi mvaneigen ! Thank you so much for your approach. It is way easier to disconstruct the process in an animation, first, and then a scrollTrigger event ! I will have a look at it and see if it gets clearer for me ! Nephtys Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 4, 2022 Share Posted August 4, 2022 @Nephtys cool! I did some more digging in your pen. I would start off by positioning your elements correctly with CSS. You want all the `.info` panels on top of each other, because you want them too animate all from the same starting position (this is also what the first demo you posted does, so try and choose and pick logic from that one). Then when you're happy with the animation you could add a ScrollTrigger to the container of all the elements and pin this container, then connect the timeline to that scroll trigger and have it animate over a height of three times the window height. See the Pen rNdddVJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Be sure to post back here if you stuck or you've got the solution! 3 Link to comment Share on other sites More sharing options...
Nephtys Posted August 4, 2022 Author Share Posted August 4, 2022 Hi mvaneijgen ! I'm back after playing around all the numbers in here It really makes me realize I have to improve my knowledge of JavaScript. Here is what I have made, and where I am stuck (It's nearly perfect ) : See the Pen poLLLgw by chrysacier (@chrysacier) on CodePen I still do not understand three things : Is there a simple way to link the left images scroll with the right one ? ; Where does that 100vh spacing at the end of the three right panels come from ; How can I change the speed of the right panel transition? I tried to change it in the ´tl´ duration, but I didn't notice a difference. I used to set a larger ´end´ point, to slow it down, but I guess it is not the correct way to do it (I'm pretty sure this one might be in the documentation, so my apologizes for asking). Thank you for your help, once again, it's really motivating to discuss with member from the GreenSock community ! Link to comment Share on other sites More sharing options...
Cassie Posted August 4, 2022 Share Posted August 4, 2022 I really suggest giving this video a watch too - it's a really nice accessible explanation of how ScrollTrigger works! Introducing ScrollTrigger for GSAP from GreenSock on Vimeo. 2 Link to comment Share on other sites More sharing options...
Nephtys Posted August 4, 2022 Author Share Posted August 4, 2022 22 minutes ago, Cassie said: I really suggest giving this video a watch too - it's a really nice accessible explanation of how ScrollTrigger works! Introducing ScrollTrigger for GSAP from GreenSock on Vimeo. Thank you so much Cassie, I will have a look at it, better not skip the steps ! Nephtys 1 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