Reagent + react-motion

core.cljs

;; Reagent component
(defn new-task-input-component [props]
  (let [new-task (subscribe [:get-new-task])]
    [view
      {:style (assoc (:slide-up styles) :transform [{:translateY (- (:y props))}])}
      [input {:style (:input styles)
              :default-value @new-task
              :auto-focus true
              :on-change-text #(dispatch [:set-new-task %])
              :on-submit-editing #(do
                                    (dispatch [:create-task])
                                    (dispatch [:hide-task-input])
                                    (dispatch [:clear-new-task]))}]
      [text
        {:style
          {:font-size 20
           :text-align "center"
           :margin-top 20}}
        "Type in your task description"]]))

;; (Reagent -> React) component
(def react-new-task-input-component
  (r/reactify-component new-task-input-component))

;; (React Motion -> Reagent Motion) component
(def motion (r/adapt-react-class (.-Motion js/ReactMotion)))

;; (Reagent -> React) + (React Motion -> Reagent Motion) component
(defn slide-up-input [visible]
  [motion
    {:style {:y (spring (if visible 105 0) (if visible (.. presets -wobbly)))}}
    #(r/create-element react-new-task-input-component %)])