react_spring.cljs

(ns acme.react-spring
  (:require [rum.core :as rum]
            ["react-spring" :as rs]))

(rum/defc AnimatedDiv < rum/static
  [style child]
  (js/React.createElement rs/animated.div (clj->js style) child))

(defn use-spring
  [config-map]
  (rs/useSpring (clj->js config-map)))

(rum/defc AnimatedParticle
  [{:keys [from to] :as _positions}]
  (let [spring (use-spring {:config {:mass 4, :tension 180, :friction 18}
                            :delay 150
                            :from {:xy from, :opacity 0}
                            :to {:xy to, :opacity 1})
        translate-xyr (fn [x y] (str "translate(" x "px," y "px)"))]
    (AnimatedDiv
     {:style {:position "absolute"
              :transform (.. spring -xyrs (interpolate translate-xyr))
              :opacity (.. spring -opacity)}}
     (Particle))))
                            
(AnimatedParticle {:from [0 0]
                   :to [123 456]})