Jump to content
Search Community

Infinite scrolling elements - simplified version

andsavu test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey there!

 

I'm looking to create an infinite/looping horizontal scroll page, and I came across this GSAP Pen:

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

 

it is a bit too much..and I would like to simplify it (no dragging, no transform/animation, no snapping), just a simple looping scroll (list of item separated by some gap, that keep repeating on scroll ).

I attached a codepen in which I started removing part of the code, but I don't understand it enough to make it work. 

 

I found a similar example 

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

 but in this one there's a jump when going from start/end if you go slow enough.

 

I'd appreciate some help here :)

 

 

 

 

See the Pen ZEjMerj by andrei-savu (@andrei-savu) on CodePen

Link to comment
Share on other sites

@GreenSock while that's definitely really cool and well documented, I'm having a hard time understanding how can I tie that to Scroll, noticing that it's based on increasing/decreasing currentIndex. 

 

I'm more interested in achieving an infinite loop scroll than having an actual slider. I guess you can call it Freemode (no snapping, no active/current index). 

Maybe using a clone of the list to get there might be a better idea? I'm reconsidering because this seems to be more tricky than I thought, lol.

 

This is what I'm trying to recreate as an idea: https://saintlouvent.com/brandings

 

Any extra guidance would be much appreciated. I'll start digging more into these examples & the documentation.

 

Thanks!

 

 

Link to comment
Share on other sites

Hi guys and @GreenSock amazing help you providing here, I want to do the same thing but I want the java to detect different image widths inside the cards array so I can modify from css which img i want to be bigger or smaller but im struggeling to add his feature.

 

I will apreciate any help here, thanks in advantage

Link to comment
Share on other sites

Hi @Juan Llopis and welcome to the GreenSock forums!

 

This example has elements with different widths, so you can use it for inspiration:

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

 

If you keep having issues let us know and remember to include a minimal demo so we can have a better idea of what the problem is.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

@Juan Llopis maybe I'm missunderstanding, but at least with my request, because there's no active item/snapping, why don't you just use different widths directly on the card element?

 

See the Pen BaPqzvX by andrei-savu (@andrei-savu) on CodePen

 

maybe also try to use vw units to get a perfect viewport mix.

 

// you can then have images either as <img tag with position absolute, width 100%, height 100% and object-fit:cover, or you can use them as background-image

  • Like 2
Link to comment
Share on other sites

@GreenSock just noticed this, now that I removed the border-radius.

 

image.png.203ac458414c05fad0e2963f27d3dc61.png

 

is there an easy way to get rid of this half a pixel gap between elements? I see it in both Chrome & Safari.

 

It seems that a negative margin left & right -1px and then a width +=2px does the trick between elements, leaving only a gap between first and last item. I would say that is good enough for me, but please let me know if theres a better way to handle this.

Link to comment
Share on other sites

3 hours ago, andsavu said:

It seems that a negative margin left & right -1px and then a width +=2px does the trick between elements, leaving only a gap between first and last item. I would say that is good enough for me, but please let me know if theres a better way to handle this.

Yeah, that has absolutely nothing to do with GSAP. It's just browser graphics rendering stuff. Annoying, I know. In some cases, adding will-change: transform can help but I don't think it really does in this case. Offsetting your margins is probably best. 

  • Thanks 1
Link to comment
Share on other sites

  • 4 months later...
On 1/30/2023 at 11:24 PM, GreenSock said:

There are quite a few ways to do that. Here's one that uses an Observer to respond to wheel/touch/pointer events: 

 

 

 

Is that sorta what you're looking for? 

Hi I tried to make this vertical, I changed all the Xpercent to Ypercent. but it didnt quite work. Is there more work to it than that?

 

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