How to bind to Framer Motion style (motion.div) components

,
1

How to bind the following in Rescript.

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

Thanks.

2

Hi @sumanthyedoti

Would something like this work for you?

module FramerMotion = {
  type animate = {opacity: float}
  @module("framer-motion") @scope("motion") @react.component
  external div: (~animate: animate) => React.element = "div"
}

let div = <FramerMotion.div animate={opacity: 1.0} />
2 Likes
3

Hi @kevanstannard

Awesome, it works. Thanks much!