rubiksx Posted October 18, 2023 Share Posted October 18, 2023 Hello everyone, I've been using GSAP quite a bit, but mostly at a basic level. I'm working on a project where I want to achieve a similar effect to what you can see on this website: https://pandapay.ca If you scroll down on that website, you'll notice the smooth sliding and a subtle parallax effect on the black/white panels. I've attached my current CodePen, where I have the panels scrolling, but I'm missing the smooth slider and that subtle parallax effect. Any help or guidance you can provide would be greatly appreciated. Thank you, Matt See the Pen XWovjmb by mattbay (@mattbay) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 18, 2023 Share Posted October 18, 2023 Hi @rubiksx welcome to the forum and thanks for being a club member 🎉 I didn't get how you made the animation, so I have changed your logic a bit, instead of having the panels side by side I've stacked them all on top of each other and then animate them .from() the right side to the position they are already in and instead of the index of the panel I've used at stagger on the tween. Then I've created an extra tween that animates the title of the panel and that animates at the same time as the previous tween using the position parameter. (I've also converted your tween to a timeline). I've changed your code not that your approach was wrong, that is the beauty of GSAP you can write in which ever way you like, but it was easier for me to explain it in this way, because that is how I'm used to working with GSAP. So right now there is a slight parallax effect on the title. Is that what you're looking for? I've disabled the second ScrollTrigger, because I've found that you hardly need more then one ScrollTrigger to get the desired effect. Hope it helps and happy tweening! See the Pen XWovjyp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
rubiksx Posted October 18, 2023 Author Share Posted October 18, 2023 Hi @mvaneijgen, Thank you Thank you very much. Yeah, this works so much better. I was thinking from the example my logic will need to change but I wasn't sure this is working really well now, and yeah, I just need to tinker with the xPercent: 50, Thansk so Much 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 19, 2023 Share Posted October 19, 2023 You're welcome! Let us know if you need any more help. Good luck with the project and happy tweening! 1 Link to comment Share on other sites More sharing options...
rubiksx Posted November 24, 2023 Author Share Posted November 24, 2023 Hi Guys Sorry to jump back into this topic. My client wants to pause eqaully each section a bit longer past the default scroll, i have been playing about, but it only seems to stay longer on the middle section. Ideally when the first one hits the top sticks, for example 5seconds then the next one, when in full view, sticks for 5 seconds, and same with the last one See the Pen poGKyOo by mattbay (@mattbay) on CodePen Thanks Matt Link to comment Share on other sites More sharing options...
Solution Cassie Posted November 24, 2023 Solution Share Posted November 24, 2023 Hey Matt! Here you go, I took out the stagger and I'm explicitly adding tweens for each panel now. I added a class of panel2 and panel3 to make it clearer. Then we can easily add a position parameter to each panel animation to create a 'pause' I honestly always recommend people write out each step of a GSAP timeline when they're new to GSAP, you'll end up with longer timelines but it's the best way to understand what's happening. Then when you really grasp what's going on you can add staggers or loops or obfuscate stuff away a little more to make the code shorter. See the Pen XWOYKNg?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
rubiksx Posted November 24, 2023 Author Share Posted November 24, 2023 Thanks, @Cassie, this makes sense and worked a dream thanks so much for your quick response 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