search

loopdive / reactor

React component library
MIT License
2 stars 0 forks source link

Infinite carousel component #14

Closed alessiojorge closed 4 years ago

alessiojorge commented 4 years ago

similar to this one lane, have a fixed number of elements, but move the last element to requeue in the front without unmounting but using a translated3d for all animations to keep the flow going https://dribbble.com/shots/14245837-Unity-Dashboard-Desktop https://yesviz.com/devices.php

I imagine we could do something like a car factory lane with an animation putting components in place (edited) a bit like they do here but as an inverse explosion (and you could click on any screen to navigate to it with our spacenav, stopping the band obviously with live theming each div in the lane should be animated with translate3d individually

alessiojorge commented 4 years ago

@ttraenkler : So the current approach we've been discussing was to absolutely position the carousel items and calculate the negative delays required to offset the animations. Then we would "wrap around" individual carousel items when they traveled the maximum distance and let them wait their turn at the beginning until they start moving again. While this should work in theory and should allow us to be quite flexible, it's a bit hard to calculate the negative delays for this and also to figure out how the element can wait for its turn once its requeued after reaching its movement target.

Maybe there is a simple solution, but i found this alternative approach: https://css-tricks.com/infinite-all-css-scrolling-slideshow/ Essentially, this is just a lane rendering some items multiple times that snaps back to its original position at some point, giving the illusion of a wrap around. Maybe this is a shortcut we could take, though if we use live websites instead of screenshots we may have to determine which of these two approaches works better in terms of performance, user experience, and implementation complexity. The latter seems to be much more straightforward so I would suggest we try this first.

alessiojorge commented 4 years ago

@ttraenkler: Here is a working implementation: https://codepen.io/ttraenkler/pen/vYGbmbL The challenge seems to be to know how much of the band we have to repeat (at least the width of the travel distance) after the end of the lane has reached its target and then just snap back the lane's position back to 0 without actually unmounting anything. For being able to know how many elements we need to repeat we need to use the summed widths of the first elements until it's greater or equal to the distance the movement animation covers.

ttraenkler commented 4 years ago

I've centered the current item. For this the band needs to be repeated three times.

ttraenkler commented 4 years ago

I've refactored the InfiniteCarousel component preparing for a first release. I plan to make a release 0.2.0 with the new carousel component for use in other projects. For this there will be some cleanup work. Generalization and adding features to the carousel should be done in a separate iteration after the release so we can already start using the library.

ttraenkler commented 4 years ago

@alessiojorge: I noticed our carousel has a few glitches on Safari (desktop and mobile). It does not move unless you hover the carousel with the mouse, which is not possible on mobile so there it does not move at all. Also, the alternating card background colors show a visual glitch for every third card when they change color and the whole carousel seems to be rerendered showing a brief flash. The likely reason is that the repetitions of the carousel items are not grouped in a div. Please have a look into it.

alessiojorge commented 4 years ago

@ttraenkler so I can't seem to diagnose the animation only starting on hover. I tried removing the pause functionality all together from the infinite carousel - this way it just never seems to start.

alessiojorge commented 4 years ago

@ttraenkler as for the flickering, I found several different solutions without any success.

ttraenkler commented 4 years ago

I fixed the paused animation issue and as per our discussion you fixed the alternating colors issue wrapping it in a div. I published this version as 0.3.1. The flickering is still there. We could try animating the elements invididually as it might be related to the opengl texture size limit of 2000px on Safari for the animations, but let let's keep this glitch for now. Also let's not readd the pause on hover for now as it was not ideal from a UX perspective and rather later revisit the carousel rewind/fast forward functionality when we have more time for this and close this chapter for now.