Jump to content
Search Community

Using GSAP ScrollTrigger for Horizontal Scroll

Sanjeet M test
Moderator Tag

Recommended Posts

Hello I am new to using GSAP 3 ScrollTrigger.

I have this '.extra-long-container' which as the name suggests is very long horizontally (Width: 7000px). In it there could be multiple elements placed at any 'x' position. I have only placed one box ('.box1') in the codepen example but there could be many. Basically I want them to animate when they come into viewport horizontally.


Note:
For this I did not want both the scrollbars to display. Due to the scrollbars being hidden the JS 'scroll' event does not fire. So I had to write a custom function to perform horizontal scroll on 'mousewheel' event ('onscroll' function in JS).

I have seen a lot of answers in forum, Codepen demos: eg: 

See the Pen mdrrbyo by oldskool123 (@oldskool123) on CodePen

Container animation, some videos eg. thisthis but they all have panels (full width & height talking panels as children) in them which I don't want. I only want to place some elements/objects at specific positions in container. They also have a vertical scrollbar in them which I do not want. I do not want either of the scrollbars.



Also as you can see in the demo the 'box1' is not at it's default position(It has been applied a transform). I have no idea why. It would be helpful if you could answer that aswell.

Please reply if you have any doubts.

This is my demo Codepen link: 

See the Pen GRxyBZj by msanjeetaxioned (@msanjeetaxioned) on CodePen

Link to comment
Share on other sites

Have you seen there is a plugin to watch for any touch events. See https://greensock.com/docs/v3/Plugins/Observer, no need to hack ScrollTrigger if that is what you want. 

 

I'm not completely sure what you are looking for, but it looks like you don't want things to happen on the scrollbar position, but that is how ScrollTrigger works. If you don't want to animate on the scroll position check the Observer plugin or if you do want thinks to happen on scroll, but not have scrollbars, just hide the scrollbars with CSS

 

::-webkit-scrollbar {
    display: none;
}

 

  • Like 1
Link to comment
Share on other sites

Thanks for the answers.
@Cassie I need to hide the scrollbars as it's required.

I have tried doing it using 'containerAnimation' aswell. Here is the demo: 

See the Pen NWYXEoB?editors=1010 by msanjeetaxioned (@msanjeetaxioned) on CodePen



But it does not work. If you turn the markers 'on'(please make sure to view this on a big screen as the markers make scrollbars appear if they are outside the display area) ,you can see that the 'start/end' markers don't move with the '.box1' element when the '.main-container' is scrolled. It shows that the 'ScrollTrigger' does not work for the custom scroll function I have written.

Can you let me know if I have done/used something wrong in this demo? Or have any solutions to this?

Link to comment
Share on other sites

So in your example 'scrollTween' isn't actually animating anything. You're animating scrollLeft in an anScroll event. That's not going to work. ContainerAnimation relies on a container being animated using a GSAP tween and then that tween being referenced as the 'container animation'

 

See the Pen dymJaXg?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Okay, thanks. So now I understood what the 'containerAnimation' does.

So this will not do anything in my project?

So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation?

I wanted to create something similar to this https://sarahfatmi.com/en

The above site is created using GSAP3, so what I am trying to achieve should technically be possible. I tried to see it's code but failed to understand it, as it's a bit too complicated.

Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given. They should also reverse on scroll back (Basically 'scrub' behaviour). Similar to the linked site.

@Cassie Thanks for the answers.

Link to comment
Share on other sites

That's a cute site!

 

I don't understand what you mean by this though.

Quote

So is there any way this can be achieved using GSAP3 ScrollTrigger or is this a limitation?

 

We've shown you multiple ways this can be achieved! There are many working demos in this thread now. Am I missing something?

 

Quote

Basically I want a long container having objects/elements (could be divs, images, svgs, videos etc) at various points in the long container and when they come into viewport they should animate based on the animation they are given

This is exactly what the demo I just linked to is doing

 

Are you asking about hiding the scrollbar? If so, although it's terrible practice for accessibility - that was also answered by @mvaneijgen

::-webkit-scrollbar { display: none; }

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

We've shown you multiple ways this can be achieved! There are many working demos in this thread now. Am I missing something?

I am sorry but those demos are completely different. I do not have panels/sections inside. I learnt the following from your previous comment. The 'containerAnimation' scrolls to the next panel/section & to the previous panel/section if scrolled back. Those panels are also 'pinned'. My container does not have full width/full height taking panels/sections. I have written a custom scroll function to scroll forward/ back '20px' (Could be any value given) of the container.

Anyways I was able to solve my demo 

See the Pen NWYXEoB by msanjeetaxioned (@msanjeetaxioned) on CodePen

, after seeing this example. 

See the Pen eYpOZvX by GreenSock (@GreenSock) on CodePen

 This above demo & the site I linked in my previous post is similar to what I wanted to achieve.

In that I also used display: none for scrollbar. So thanks @mvaneijgen for that and thanks @Cassie for replying so many times.

Link to comment
Share on other sites

  • 7 months later...

Hi guys,

I am using gsap for horizontal scroll, but now I am stuck at a point where I have a dynamic list of horizontal cards.But the the section is taking fixed width and thus all the cards not visible in thet section.

Please help.I am new to gsap

here is my code, please check panel-5 with cards-wrapper

See the Pen gOdvBZo by codertacina (@codertacina) on CodePen

Link to comment
Share on other sites

Hey there -

 

These demos are set up to achieve a certain effect, so just adjusting the markup like this isn't going to work. You'll have to adjust how the CSS is styling the elements and also the logic surrounding the tweening.

Here's a start for you, I adjusted the sizing of the last container so that it doesn't collapse in a flex container and also changed the amount each panel was moving - hope it helps!

See the Pen ZEMrmVB?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Sorry that codepen is a bit too messy for me to parse and I don't really know what the issue you're facing is.

 

I'd suggest stripping it back to *just* the functionality you're struggling with or starting from something simpler and gradually layering content and functionality in.

Link to comment
Share on other sites

I'm afraid I can't help with bootstrap - but you haven't copied over the CSS from the demo I put together and you have a bunch more CSS in there that's conflicting, overflow hidden on containers, more flex containers that have children that are collapsing.

 

This is a great guide if you're confused
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I'm not sure what's going on with the anchor links I'm afraid - I'd largely just be playing spot the difference so why don't you give it a go? Log out some values and try working out what's happening in the working demo as opposed to what's happening in the broken one.


See the Pen oNPEKMO?editors=0011 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi @Cassie

 

I have this onUpdate code

its giving me wrong section id
 

onUpdate: (self) => {
                        const slideIndex = Math.round(self.progress * (slides.length - 1));
                        const slideId = slides[slideIndex].id;
                        console.log(slideId);
                        updateActiveNav(slideId);
                        updatePrevNext(slideId);
                    },
Link to comment
Share on other sites

Yep - it would be giving you the wrong section, that's also been written with a different use case in mind.

 

I'm afraid I don't have time to do this entirely for you but here's a fork with some useful console logs I've added in

 

You've already got the number value for each section, (I logged it out for you) you'll have to save those values somehow and check for them in the onUpdate, then when you hit them you can change the nav highlight.

See the Pen rNZdVdg?editors=0011 by GreenSock (@GreenSock) on CodePen



Hope this nudge helps!

 

Link to comment
Share on other sites

  • 3 months later...

Hi All,

Also I'm very new to the world of GSAP and i've having difficulties implementing the scroll effect.

I am using Oxygen Builder and have a container with a repeater inside it which could grow to any width (off screen).

 

I would like this to become the part which GSAP horizontal scroll takes over from - but even with endless tinkering, I can't seem to recreate what i am looking for.

 

The main issues are that all demos seem to have a fixed 400% for 4 full width sections. I would like to set my widths of divs within the container independently and I don't neccessily need them to snap to the start of each div as this would be created within a repeater anyway.

 

Example of what i would like to achieve on 'career' section of https://www.alexalbon.com/

 

Is anyone able to help? Many thanks in advance

Link to comment
Share on other sites

Hi @neonerve and welcome to the GreenSock forums!

 

Is really hard for us to give any help without a minimal demo. There are tens of examples in the forums about horizontal scrolling with widths different than 100% of the browser window:

 

Those are just three.

 

Hopefully that helps. If you keep having issues, please create a minimal demo that illustrates the problems you're having.

Happy Tweening!

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