Jump to content
Search Community

Horizontal scroll with Gsap

ReaganWP test
Moderator Tag

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

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

  • 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...

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.
×
×
  • Create New...