Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ReaganWP

Horizontal scroll with Gsap

Recommended Posts

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

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 :) 

  • Like 2
Link to comment
Share on other sites

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

Sure, you can include GSAP and ScrollTrigger just like any other external library in WP. 

Link to comment
Share on other sites

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

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 :) 

  • Like 1
Link to comment
Share on other sites

Perfect! Thank you. I'll try this :)

Link to comment
Share on other sites

  • 3 months later...

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 by brennamacquarrie
whoa, code posts weird.
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Hi is there , i want to know 1962885747_scrollhorizontal.png.78db5b55803f3f36830b1b1b630e2940.pnghow to cerate rotate slide like this,

Link to comment
Share on other sites

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

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!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×