purescript-framer-motion

PureScript bindings for Motion (formerly Framer Motion) - a production-ready animation library for React.

# Install PureScript package
spago install react-motion

# Install npm dependencies
npm install motion@^12.29.2 react@^18.2.0 react-dom@^18.2.0

module Main where

import Prelude
import Framer.Motion.MotionComponent as Motion
import Framer.Motion.Types (animate, initial, whileHover, whileInView)
import React.Basic.DOM as R
import React.Basic.Hooks (element)

myComponent = element Motion.div
  { initial: initial { opacity: 0.0, y: 50.0 }
  , animate: animate { opacity: 1.0, y: 0.0 }
  , whileHover: whileHover { scale: 1.05 }
  , whileInView: whileInView { opacity: 1.0 }
  , children: [ R.text "Animated content!" ]
  }

• Scroll animations: whileInView prop and useInView hook
• Focus animations: whileFocus prop
• Manual controls: useAnimate hook with automatic scoping
• Enhanced scroll tracking: useScroll with container and target options
• React 18: Updated to latest React and Motion
• Better performance: Motion's hybrid animation engine

• 🎨 Declarative animations - Animate with simple props
• 🎯 Gesture support - Hover, tap, drag, pan out of the box
• 📜 Scroll animations - Both scroll-triggered and scroll-linked
• 🔄 Layout animations - Smooth layout transitions
• 🚪 Exit animations - AnimatePresence component
• 🎭 Variants - Orchestrate complex animations
• 🪝 Hooks - useAnimation, useScroll, useInView, useAnimate
• 🎮 MotionValues - Composable animation values

import Framer.Motion.MotionComponent as Motion
import Framer.Motion.Types (animate, initial, transition)

fadeIn = element Motion.div
  { initial: initial { opacity: 0.0 }
  , animate: animate { opacity: 1.0 }
  , transition: transition { duration: 0.5 }
  , children: [ R.text "Fades in" ]
  }

scrollAnimation = element Motion.div
  { initial: initial { opacity: 0.0, y: 100.0 }
  , whileInView: whileInView { opacity: 1.0, y: 0.0 }
  , children: [ R.text "Animates when scrolled into view" ]
  }

interactive = element Motion.button
  { whileHover: whileHover { scale: 1.1 }
  , whileTap: whileTap { scale: 0.95 }
  , drag: drag true
  , dragConstraints: dragConstraintsBoundingBox 
      { left: -100.0, right: 100.0, top: -100.0, bottom: 100.0 }
  , children: [ R.text "Drag me!" ]
  }

import Framer.Motion.Hook (useInView)

myComponent = React.component "MyComponent" \props -> React.do
  ref <- React.useRef null
  isInView <- useInView ref Nothing
  
  pure $ element Motion.div
    { ref: ref
    , style: { opacity: if isInView then 1.0 else 0.0 }
    , children: [ R.text "Visible when in view" ]
    }

• motion.div, motion.button, motion.span, etc. - Motion-enhanced DOM elements
• motion.svg, motion.path, motion.g, etc. - Motion-enhanced SVG elements
• animatePresence - Wrapper for exit animations

• animate - Target animation state
• initial - Initial animation state
• exit - Exit animation state
• transition - Animation timing
• variants - Named animation states
• whileHover - Hover state
• whileTap - Tap state
• whileDrag - Drag state
• whileInView - NEW: Scroll into view state
• whileFocus - NEW: Focus state
• layout - Enable layout animations
• drag - Enable dragging
• Various event handlers (onHoverStart, onDragEnd, etc.)

• useAnimation - Animation controls
• useViewportScroll - Page scroll values
• useScroll - NEW: Enhanced scroll tracking with options
• useInView - NEW: Viewport intersection detection
• useAnimate - NEW: Manual animation controls
• useTransform - Transform motion values
• useSpring - Spring physics
• useMotionValue - Create motion values

If you're upgrading from the old framer-motion bindings:

1. Update npm packages:

   npm uninstall framer-motion
   npm install motion@^12.29.2 react@^18.2.0 react-dom@^18.2.0

2. No PureScript code changes required! All your existing code will continue to work.

3. Start using new features like whileInView for scroll animations.

See CHANGELOG.md for complete migration details.

• Motion Official Docs
• API Reference
• Examples

MIT

Issues and PRs welcome!