search

braposo / react-text-loop

Animate words in your headings
https://codesandbox.io/s/react-text-loop-playground-br4q1
MIT License
880 stars 66 forks source link

Display previous and next text at the same time #56

Open sswoodruff89 opened 4 years ago

sswoodruff89 commented 4 years ago

Hey guys, is there a way to display more than one text item, like displaying the previous items and the next items in the loop at the same time? For example, I have a list of text items and I want to show five at any given time. The middle one would be the current one, the top two would be the previous two and fading out at different stages, and the bottom two would the be the next in the list and fading in at different stages.

braposo commented 4 years ago

Hi @sswoodruff89! Not sure what you're trying to achieve from your description, do you have a more visual example you can give? General you can group components together so they are displayed at the same time by just wrapping them in another components. react-text-loop will only consider the top-level child components when looping so anything inside them will be part of the same transition.

We don't support customising the number of elements that are displayed, but maybe using that grouping would be enough?

iksent commented 2 years ago

@braposo, I think this is https://codepen.io/poopsplat/pen/VLdNZq the example, of what @sswoodruff89 trying to achieve. I am also trying to do this.