How do I add ScrollMagic EventHandlers in React?

[rgala98]

How Do I add scrollmagic Event handlers in React. I want to use scene.on("update",e => {....}). But I don't find a way to use it.

Please help

[Hahlh]

@rgala98 I am looking into event handling atm.

This is relevant: https://github.com/bitworking/react-scrollmagic/issues/2

This means, that you should wrap the child of your scene in a function, that returns the child of <Scene>. You can access progress and event there.

Check the event for what is available.

Barebones example (not tested, but illustrates the concept):

import React from "react"
import { Controller, Scene } from "react-scrollmagic"

export const AnimationPlug = ({}) => {
  return (
    <>
      <Controller>
        <Scene>
          {(event) => {
            console.log("event:",  event)

            return <div></div>
          }}
        </Scene>
      </Controller>
    </>
  )
}