Clojurians Log v2

@jcb that's still doesn't work unfortunately. The animation does work, but I still have to click twice or re-focus on the webpage for it to occur. What should I do to get help?

I have a question on reagent performance for large svg drawings (which contain 100s or 1000s of sub nodes): Is the vdom-dom rendering much slower than pure HTML in such cases?

@pshar10 at this point, probably worth putting together a simplified gist so people can test it themselves. Have you had plain css or React Css Transition Group animations working? they all work in basically the same way

Hi @pshar10 sorry i was off

Here a sample of code that works and show how to. use animate-presence

(defn my-comp
  []
  (r/with-let
   [clicked (r/atom false)]
   [:<>
    [:div {:on-click #(swap! clicked not)}
     "click me"]
    [:> motion/animate-presence
     (if @clicked
       [:> motion/div
        {:key :my-comp
         :class [:my-comp]
         :variants {:initial {:opacity 0
                              :y 100
                              :x 0
                              :scale 1}
                    :animate {:opacity 1
                              :y 0
                              :scale 1}
                    :exit {:opacity 0
                           :x 100
                           :scale 0.2}}
         :initial :initial
         :animate :animate
         :exit :exit}
        "my-comp"])]]))

The key part is important and should be. different for each componentthat use motion

Here is the same example without if and with a different key based on an atom

(defn my-comp
  []
  (r/with-let
   [clicked (r/atom false)]
   [:<>
    [:div {:on-click #(swap! clicked not)}
     "click me"]
    [:> motion/animate-presence
     [:> motion/div
      {:key (str :my-comp @clicked)
       :class [:my-comp]
       :variants {:initial {:opacity 0
                            :y 100
                            :x 0
                            :scale 1}
                  :animate {:opacity 1
                            :y 0
                            :scale 1}
                  :exit {:opacity 0
                         :x 100
                         :scale 0.2}}
       :initial :initial
       :animate :animate
       :exit :exit}
      (str "my-comp" @clicked)]]]))

r/with-let is reagent/with-let