Question: How to animate each when appearing on viewport? about react-spring-carousel-js HOT 3 CLOSED

@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? :)

from react-spring-carousel-js.

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?

from react-spring-carousel-js.

@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
}

from react-spring-carousel-js.