Jump to content
GreenSock

Dennyno

Change class on horizontal Scroll

Go to solution Solved by Dennyno,

Recommended Posts

Hi, I'm trying to achieve a simply CSS slider. And that's ok.

But, going further, I may need to toggle class or directly "do things" to the first item (example: make it sticky) as Facebook does, while horizontal scrolling, and not just un ugly 'mouseenter' which will be the same as an "hover" solution

Via CSS I did while hovering the elms, but this is not to clear and clean.

Any GSAPable solution?

Tx

See the Pen RwLYQBm by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

I'm not sure I totally understand your question but yes you can certainly use ScrollTrigger to make something happen when a particular element reaches a certain point when scrolling horizontally or vertically. 

 

In my opinion, horizontal scrolling should generally be avoided from a UX perspective because most people are used to scrolling up and down with a mouse wheel and it feels more natural, but you can have that vertical scrolling make things more horizontally. That's simple enough with pinning and an x or xPercent animation. There are plenty of demos available. 

 

If you truly need the native horizontal scrolling, you can still use ScrollTrigger for that too. There's a horizontal: true option. I'd suggest reading the ScrollTrigger docs, watching the video, and giving it a try. Then if you get stuck, post here with a minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 👍

 

Here's a quick example that adds an "active" class while any of the items is visible: 

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

  • Like 1
Link to comment
Share on other sites

3 hours ago, GreenSock said:

I'm not sure I totally understand your question but yes you can certainly use ScrollTrigger to make something happen when a particular element reaches a certain point when scrolling horizontally or vertically. 

 

In my opinion, horizontal scrolling should generally be avoided from a UX perspective because most people are used to scrolling up and down with a mouse wheel and it feels more natural, but you can have that vertical scrolling make things more horizontally. That's simple enough with pinning and an x or xPercent animation. There are plenty of demos available. 

 

If you truly need the native horizontal scrolling, you can still use ScrollTrigger for that too. There's a horizontal: true option. I'd suggest reading the ScrollTrigger docs, watching the video, and giving it a try. Then if you get stuck, post here with a minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. 👍

 

Here's a quick example that adds an "active" class while any of the items is visible: 

 

 


Hi, Jack thanks!

I need to toggle class only to the first element, and only after any of the other nth elements (maybe just the second child could be enough) have been scrolled horizontally (maybe 30px as example).

As my demo: I have the first element which is sticky and scale on hover (just to show you the idea), while I m trying to do the same, but only if horizontal scrolling there.

It's just a demo.. I know it's still ugly and against any Ux at the moment. :)

Tx

 

Link to comment
Share on other sites

giphy.gif

Trying to achieve something like this, avoiding other js frameworks.
Just plain CSS and a small gsap to toggle the first element.

 

Link to comment
Share on other sites

Hi @Dennyno,

 

This is definitely possible.

As Jack said - go ahead and try it out, take a look at the demos he's provided and if you get stuck we'll be happy to take a look!

  • Thanks 1
Link to comment
Share on other sites

EDIT:Solved

LOL: an easy, really easy thing. :) Thanks

 

@Cassie

Link to comment
Share on other sites

@GreenSock @Cassie

here's the updated version.
It was really easy, so sad the script get troubles with the CSS Grid and its scrolling...

Any idea how to fix it?

See the Pen bGomevW by DedaloD (@DedaloD) on CodePen


 

Link to comment
Share on other sites

  • Solution
3 hours ago, Dennyno said:

@GreenSock @Cassie

here's the updated version.
It was really easy, so sad the script get troubles with the CSS Grid and its scrolling...

Any idea how to fix it?
 


 

 

Thanks for anyone, solved by removing the carousel wide scroll-snapping, and appending it only to the last items.

Now, just one extra hint: I set the animation to start after 150px... how to make it start after the first element has scrolled, indipendently from its size?

Using grids, all the items are responsive, so let's suppose: on mobile  each item has 150px width, so it's good to put a starting point after 150px from top (in this case left), but on desktop each item could be, instead, 250px. So in this case I'll need an offset of 250px

Thanks again

Link to comment
Share on other sites

You can use keywords like 'left' and 'right' to specify the start position of the trigger.

So in your case you'd need it to start when the right hand side of the element hits the left hand side of your scroller.

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, Cassie said:

You can use keywords like 'left' and 'right' to specify the start position of the trigger.

So in your case you'd need it to start when the right hand side of the element hits the left hand side of your scroller.
 

 

Lol yep.. I didnt mind to work horizontally :P feeling so stupid DOH!
Thanks @Cassie - gonna update once done :D Thank you again

Link to comment
Share on other sites

Hi again, @Cassie:)
I did a small improvement on the Ux.

Now 1 extra things to clarify, that I cant resolve:

the final result is not as smooth as I tought :( is something related to my code? Or is it something that just fb can do being inside an App, which can follow better the gesture?

Or maybe I need add scrubbing? But shall it work togglin class too?

Link to comment
Share on other sites

scrubbing only works for GSAP animations. And Cassie's demo seemed fine for me, but a native app will probably perform better as they are limited to a single thread like JavaScript in the browser is.

 

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