Jump to content
Search Community

react infinte scroll slot machine MUCH DATA examples

artstyle test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

i want to create a slot machine on REACT. image i have a 10000 elements, 1000 rows by 10 elements in a row, so its not possible to render them at once(even get that data at once). so i want to render at least 10 rows and do a pagination on scroll and add some rows to the bottom and remove from the top when scroll bottom and vice versa when scroll top. do you think its possible? do you have any examples guys? just wanna test the performance. wanna look how it looks like

Link to comment
Share on other sites

  • artstyle changed the title to react infinte scroll slot machine MUCH DATA examples

Sure, that's probably very doable but like you said, just limit the DOM elements at any given time. 


It's a very particular use case that'd require custom code of course. I don't know of any existing examples. 


You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact GreenSock directly. 


Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

  • Solution



Maybe this example provides a good starting point for this:

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


You can change the onUpdate method for a onLeave callback in order to make the ajax request, then add the new elements and then refresh the ScrollTrigger instance.


Hopefully this helps.

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