ReaganWP Posted July 1, 2020 Share Posted July 1, 2020 Hi guys, I am a new member here and I just started learning Gsap a week ago. I Just want to ask if there are tutorials on how to create a horizontal scroll like in the video I posted in YT (the link). That website is using gsap. I did a lot of research and did few tests but I can't seem to achieve it. Thank you for your help! Stay safe always! Reagan Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 1, 2020 Share Posted July 1, 2020 Hey Reagan and welcome to the GreenSock forums! GreenSock's new plugin ScrollTrigger is perfect for that sort of thing. It has a lot of examples in the docs including one doing almost exactly what you're asking for: See the Pen BaogqYy by noeldelgado (@noeldelgado) on CodePen Happy tweening 2 Link to comment Share on other sites More sharing options...
ReaganWP Posted July 1, 2020 Author Share Posted July 1, 2020 Thank you so much for the quick response sir, I'll try it. Was that possible to integrate in WP? Thanks again! Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 1, 2020 Share Posted July 1, 2020 Sure, you can include GSAP and ScrollTrigger just like any other external library in WP. Link to comment Share on other sites More sharing options...
ReaganWP Posted July 1, 2020 Author Share Posted July 1, 2020 Gotcha, thank you very much! Link to comment Share on other sites More sharing options...
ReaganWP Posted July 1, 2020 Author Share Posted July 1, 2020 Hi is there any specific tutorial on the horizontal scroll? for some reason and I'm not sure why but it's not working in my end. I only know HTML, CSS, JS, and Jquery, and I just started this gsap cool animation. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 1, 2020 Share Posted July 1, 2020 First, start with the basics of GSAP: Then learn how to animate efficiently. Then watch the video and read the ScrollTrigger docs. Then try to understand the demo that I shared above. If you have specific questions feel free to ask. This will teach you how to fish instead of just giving you a fish 2 Link to comment Share on other sites More sharing options...
ReaganWP Posted July 1, 2020 Author Share Posted July 1, 2020 Perfect! Thank you. I'll try this Link to comment Share on other sites More sharing options...
brennamacquarrie Posted October 5, 2020 Share Posted October 5, 2020 (edited) hi! i am using the scrollTrigger successfully on my page, but i have only ONE div in my markup that is overflow-x: scroll (as opposed to the rest of the page which scrolls on y axis, obbbbbbviously). I would love to use gsap animations for this div...? the elements I want to have morphing on scroll is each separate .displayVisual (as they fall in and out along the x-axis) ... eventually i want to transform so they grow in the center as user scrolls. I'm not sure what I'm missing here.... they're still only animating on vertical scroll? gsap.from('.displayVisual', { scrollTrigger: { trigger: '.displayVisual', toggleActions: 'restart pause resume reset', scrub: true, }, duration: 1, scale: 1.3, }); Edited October 5, 2020 by brennamacquarrie whoa, code posts weird. Link to comment Share on other sites More sharing options...
GreenSock Posted October 5, 2020 Share Posted October 5, 2020 It's tough to say without seeing a minimal demo, but it looks like you just forgot to set horizontal: true on your ScrollTrigger and define the scroller as the element that has the overflow-x: auto (the element that's doing the scrolling). If you still need some help, please provide a minimal demo. See https://greensock.com/demo for instructions about how to do that. Happy tweening! 1 Link to comment Share on other sites More sharing options...
gihan22603 Posted July 23, 2021 Share Posted July 23, 2021 Hi is there , i want to know how to cerate rotate slide like this, Link to comment Share on other sites More sharing options...
GreenSock Posted July 23, 2021 Share Posted July 23, 2021 Welcome to the forums, @gihan22603. I don't understand your question. Can you please be more specific? If you just want to rotate things, you can animate the "rotation" property. You can offset the transformOrigin really far down to get the look from that screen shot, like transformOrigin: "center 500px" for example. If you still need help, please make sure you include a minimal demo. We really try to keep these forums focused on GSAP-specific questions and not general logic issues or CSS markup, etc. See the forum guidelines. Happy tweening! Link to comment Share on other sites More sharing options...
gihan22603 Posted July 23, 2021 Share Posted July 23, 2021 hi, i want to know how Horizontal scroll with GSAP like this website Yolélé — Revolutionary African Foods (yolele.com) i did horizontal scroll with GSAP , but i want to do it circular like yolele.com . they scroll horizontal around the circular path. Link to comment Share on other sites More sharing options...
GreenSock Posted July 24, 2021 Share Posted July 24, 2021 From my cursory glance, the basic concept is to just set them up in a circular pattern (like I said, an offset transformOrigin and then rotate them) and then animate them (either all at the same time, or put them into a container whose rotation you animate) in a timeline from right to left and hook that up to a ScrollTrigger with scrub: true (or a number to smooth it out). Feel free to give it a shot and if you have an other GSAP-specific questions, feel free to ask. If you want someone to build it for you, you're welcome to post in the "Jobs & Freelance" forum to hire someone. Good luck! 2 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