OM: What is the best way of introducing animation/effects during application state transition ?

[clojur...@gmail.com]

Hi Everyone,

I have an application state

(def app-state (atom {:index 0 :some-list [1 2 3 4]}))

When next button is clicked, index is incremented and the corresponding item from the :some-list is displayed. Now I want to introduce an animation/effect during the transition from one item to another. How should I go about it in Om ?

regards

[David Nolen]

I would probably do this by hooking into IWillUpdate. Generally whatever solution makes sense for React will make sense for Om.

David

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.

[clojur...@gmail.com]

Thanks. It worked!

[Jack Schaedler]

Hi David,

Thanks heaps for all of your tutorials and work on Om. I've got a nice little clojurescript app with full undo/redo working with Om thanks to your tutorials and blog posts, and my goal for today is to work on animations.

As an alternative to the interval within IWillMount, has anyone successfully used the ReactCSSTransitionGroup (http://facebook.github.io/react/docs/animation.html) addon within Om? I'm a newcomer to both cljs and React, and I've unsuccessfully attempted to do something like:

(def css-trans-group (-> js/React (aget "addons") (aget "CSSTransitionGroup")))

(defn my-component [app owner]
(reify
om/IRender
(render [this]
(css-trans-group #js {:transitionName "example"}
(apply dom/div nil
(om/build-all palette-entry-component palette))))))

Is this sort of approach reasonable within Om? Sorry in advance for the probably silly question!

-jack

[David Nolen]

Several people have successfully used the CSS transition group add on, hopefully they can chime in.

[Jack Schaedler]

Hi David,

Thanks for the quick response! Seems to be working just fine now. I must have screwed up something simple when I initially tried it yesterday.


For posterity:

1) Access the CSSTransitionGroup from cljs:

(def css-trans-group (-> js/React (aget "addons") (aget "CSSTransitionGroup")))

2) Wrap your elements in a css-trans-group just like you would a dom/div or dom/ul or whatever:

(om/root
(fn [app owner]
(apply css-trans-group #js {:className "my-class-name" :transitionName "example"}
(map (fn [text] (dom/li nil text)) (:list app))))
app-state
{:target (. js/document (getElementById "app0"))})

3) Adhere to the naming convention for transition classes in your css (noting use of 'example' above):

.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
opacity: 1;
}


.example-leave {
opacity: 1;
transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
opacity: 0.01;
}


Best,
-jack

[Dmitry Suzdalev]

Thank you Jack for this question and later example, it certainly helps a newcomer like me :)

Dmitry.

[Dylan Butman]

CSSTransition groups are cool, but often what you want to do is transition state (or props). I wrote a tiny thing along the same lines for React which I've used a lot in production https://github.com/pleasetrythisathome/react.animate

Haven't had time to write the corresponding Om stuff yet, but the concept is very simple. Basically you just want to define an interpolator between your start and end value, and then write a function that gets called faster than request animation frame and then invokes an interpolator with 0-1 and calls set-state! or transact! with the result.

Not sure if any of this is helpful at all...

[Matt DeBoard]

Wow, thank you for posting your solution after the fact, instead of doing this:

http://imgs.xkcd.com/comics/wisdom_of_the_ancients.png