Reagent animations with framer-motion

animations.cljs

(ns app.motion
  (:require
   [framer-motion :refer (motion AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion]
   [cljs-bean.core :refer [bean ->clj ->js]]))
(def div
  (.-div motion))
(def span
  (.-span motion))
(def li
  (.-li motion))
(def img
  (.-img motion))
(def button
  (.-button motion))
(def input
  (.-input motion))
(def textarea
  (.-textarea motion))
(def label
  (.-label motion))
(def transform #(motion/transform (->js %1) (->js %2) (->js %3)))
(def animate-presence AnimatePresence)
(def use-spring useSpring)
(def use-motion-value useMotionValue)
(def use-transform useTransform)
(def use-viewport-scroll useViewportScroll)
(def spring
  {:type :spring
   :damping 1000
   :stiffness 10700})

core.cljs

(ns app.core
  (:require [cljs-bean.core :refer [bean ->clj ->js]]
            [re-frame.core :refer [dispatch subscribe]]
            [app.motion :as motion]
            [herb.core :refer [<class]])

(defn page
  [id content]
  [:> motion/div
    {:key (str "page" id) ; IMPORTANT UNIQUE ID 8
      :class [:page (<class styles/page)]
      :variants {:initial {:opacity 0}
                 :animate {:opacity 1}
                 :exit {:opacity 0}}
      :initial :initial
      :animate :animate
      :exit :exit
     content}])
            
(defn pages
  []
  (let [page @(subscribe [:page/current])]
    [:> motion/animate-presence
      (case page
        :page-1 [page :page-1 [page1]]
        :page-2 [page :page- ...]
        ...)]))