Is there a straightforward way to fade a component in when mounting, and fade a component out when unmounting?
I can get a component to fade in by using some jquery in the did-mount function, but getting it to fade out in the will-unmount function just doesn't work (the unmount happens instantly).
What is the standard way of animating the mounting and unmounting of Om components?
Take a look at my answer here.
Basically, you can use ReactCSSTransitionGroup from react-with-addons to create CSS transitions for mounting and unmounting:
(def css-trans-group (aget js/React "addons" "CSSTransitionGroup"))
...
(apply
css-trans-group
#js {:transitionName "example"}
(om/build-all my-component list-of-data))))
Related
I'm trying to run an animation based on scroll in the background of a React app.
I use Threejs with React Three Fiber. In R3F, there is a hook called useScroll which I want to use.
Problem is that my Threejs scene (a Canvas) is in the background with zIndex: -100, so the scroll handler doesn't get the user input.
If I remove the zIndex property, everything works, but It's not what I want.
The scene look like this demo, the only difference is that mine has element in front.
I don't know if the solution is to use a different css style or something more complexe to allow the handler to do his job. I've been looking at React Portal but I don't think it will work.
Any ideas ?
Thanks in advance.
Taking the two icons volume_up and volume_down from https://material.io/resources/icons/?style=baseline
I want to achieve the same effect as the gif below in flutter.
To note, I am using bloc architecture so pretty much everything is Stateless and would prefer avoiding Stateful widgets.
The animation should be infinite duration.
I cannot figure out a simple way to essentially swap between two icons on an infinite loop using animations (and a plus would be for a nice fade in/out effect).
I thought about using a Timer and swapping between the two icons but that seems a rather basic hack for what should be a tried and tested functionality.
Does anyone have a code solution to achieve what the gif shows or can point me to an example doing the same thing?
Thanks.
Simply use AnimatedSwitcher switch between images and control the duration by Timer
AnimatedSwitcher
I've been looking around for how to create animations in Om, I've tried creating a RaphaelJs component with moderate success. I get the animation I want, but for some reason Om renders multiple instances of the SVG element.
Looking at the animation example in the Om github folder uses setInterval to change the values you want to animate, which is less than ideal.
I'm aware of the CSSTransitionGroup addon, but it looks like you can only flip between preset animations defined in the CSS, you can't decide to do something like rendering a path and having a shape following it with randomised timings. Please feel free to correct me if you can dynamically define animations using it.
Does anyone have any good examples of performing simple animations? Just translating or rotating simple shapes would give me an idea of how to start tackling it from there.
You can use CSSTransitionGroup to animate position/movement, orientation and other visual properties like opacity, color, borders or shadows (perhaps using keyframes) or more complex hacks. The major limitation of this approach is that it only allows you to animate mounting and unmounting of components and then only through animation defined in CSS.
If you need to animate components during their mounted lifetime or you want more fine-grained control over what you can animate, you might want to take another approach like what I do in this code.
This is how you would use CSSTransitionGroup from Om.
For this to work, you need to use the with-addons version of React (eg react-with-addons-0.12.1.js or react-with-addons-0.12.1.min.js).
(def css-trans-group (-> js/React (aget "addons") (aget "CSSTransitionGroup")))
(defn transition-group
[opts component]
(let [[group-name enter? leave?] (if (map? opts)
[(:name opts) (:enter opts) (:leave opts)]
[opts true true])]
(apply
css-trans-group
#js {:transitionName group-name
:transitionEnter enter?
:transitionLeave leave?}
component)))
Then to use it, you can do:
(transition-group "example" (when visible? (om/build my-component data)))
Now toggle visible? to animate my-component being mounted and unmounted. If you want to disable either the enter or leave animation:
(transition-group
{:name "example"
:enter false} ; Only animate when component gets unmounted, not when mounted
(when visible? (om/build my-component data)))
You can also animate adding or removing from/to lists of items:
(transition-group "example" (om/build-all my-component list-of-data))
Or using map, perhaps something like:
(transition-group "example" (map #(dom/li %) list-of-data))
You also need to add the correct CSS:
.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;
}
Note that unless you disable one of the animations, you need to include both in the CSS. For example, if you leave out the leave animation, then your component may not get unmounted as React will hang waiting for the animation to complete. Simple fix is to disable it using {:leave false} or to include the leave animation in your CSS.
One other gotcha to be aware of: this will only animate child components if the transition group is mounted before the children. If the children and the transition group are mounted at the same time, then they won't be animated. This can be a bit awkward sometimes. For example, the above code snippets would not animate without the (when visible? ...) as without toggling, the child would be mounted at the same time as the transition group. Also, the build-all example below works best if list-of-data is not prepopulated but instead populated after mounting. For this reason, CSSTransitionGroups work best for code that switches between views/components or lists of data that gets modified by the user, but doesn't work for animating initial display of components on page load.
Perhaps something like:
(transition-group "view-selection"
(condp = current-view
"home" (om/build home-page data)
"blog" (om/build blog-page data)
"about" (om/build about-page data)
:else (om/build error-404-page data)))
-
Finally, if you do not wish to use a helper function, you can use css-trans-group directly:
(css-trans-group
#js {:transitionName "example"}
(when visible? (om/build my-component data)))))
Or, if using a lists of child components (eg through map or build-all):
(apply
css-trans-group
#js {:transitionName "example"}
(om/build-all my-component list-of-data))))
I have not yet used the low-level TransitionGroup API. More information can be found on the React CSSTransitionGroup page.
Care to look into a ClojureScript port of https://github.com/chenglou/react-tween-state or https://github.com/chenglou/react-state-stream?
TransitionGroup provides nothing but helpers for hooking onto some lifecycle events. It theoretically has nothing to do with animation. If you want an actual animation API, give a look at the two things I made above. The readmes should provide enough information for the rest.
I am wondering if there is any library to enable me to upload big image on website and than create animation.
Animation description:
Show are is smaller let's say 300*300 and image uploaded is 1024*768 and I would like the animation to go around the image, zoom out a little, zoom in, etc.
I hope I was clear enough.
Thanks for answers
This can be easliy done with the jquery function animate:
jquery animate() doc
They have some examples in their documentation. You can either work in a div with "overflow:hidden" and put the image in that div or set is as a background image. animate() allows you to manipulate the css styles. Also, you can append animate() calls.
I have a dojo animation object of about 15 images. I'm also using dojo.fx.chain to link them all together.
Right before I create all my dojo.fadeIn's and dojo.fadeOut's I added in some basic javascript to preload each image.
My question is: Am I doing this the hard way or is there some function/attr I can set in the animation object to do this?
I do not think there is a predefined method in dojo to preload these images for your animation.
I guess you are listening image.onload and image.onerror events to preload images, it is a common method. If you feel it is too difficult and hard to control, you can try a simple clean css way that is to put an invisible div into your page and set background images with these animation images. When the page load, the images are automatically loaded.
dojo Animations are not specifically geared around images, they work on an abstract level and may operate on DOM nodes. So, there's no built-in support for IMG nodes specifically.
There is dojox.image.preload (http://api.dojotoolkit.org/jsdoc/HEAD/dojox.image.preload) which will do the work virsir suggested of loading images into an offscreen div, but it does not (currently) arrange an onLoad event hook for you to detect when they're loaded and thus play your animation.
I imagine you could use preload()'s return value and use it to hook into onLoad, but that's an exercise for the reader. Have a look at the source code, dojox/image/_base.js.