Question: How to animate each when appearing on viewport?

[cargallo]

Hi, thanks for the library. I'm new in react-spring I search for spring carousel and meet your lib. I want to animate each element inside each carousel item when it appears in the viewport is that possible? There is some example that I cant base on?

[Emiliano-Bucci]

@cargallo Hi and thanks for reaching me! So if I understood correctly, you want to let's say fade in the active item when enters in the viewport, right? When it becomes active; is this assumption correct? :)

[cargallo]

Hi, thanks for the answer. I want to do something like this. I attach a record screen as example. Watch that each slide in de carousel is like a div and each individual content inside that slide appears at diferent time. How can I achieve that behaviour with this library?

https://user-images.githubusercontent.com/13320290/113493845-9388aa80-94b9-11eb-881a-18274526256a.mp4

[Emiliano-Bucci]

@cargallo Ok yes, is what i thought. In order to archive what you want, you should add the logic inside the components that are rendered inside the slides. You should pass the id to every single item and check if the item is the active one using the method getIsActiveItem that the carousel expose. Then you can animate your items when the isActive variable is true.

function MyComponent({ id }) {
  const [isActive, setIsActive] = useState(false)
  const { useListenToCustomEvent, getIsActiveItem } = useSpringCarouselContext()

  useListenToCustomEvent(({ eventName }) => {
    if (eventName === 'onSlideStartChange') {
      if (getIsActiveItem(id!)) {
        setIsActive(true)
      } else { 
        setIsActive(false)
      }
    }
  })

  return // return
}