I have been using react to build out an editor. One of the configurable properties is to dynamically generate background color animation. For example, an infinite fade in and fade out with a x second period.
The problem is that the color animation needs to be same and synchronized in multiple views. CSS animations does not enable that synchronization without being hacky. I want to use 'react-motion' but it does not incorporate timing easily.
Looking for some concrete examples using react + react libraries (ideally react-motion). Thanks in advance.
Not a direct answer to your request for examples using react + react libraries, but, if you're rendering on the client/browser you can use a global var for keeping sync between views. If that is too "hacky" for you, then perhaps finding a common parent up the ladder that both views can be handed a synchronized var/value.
After doing quite a bit of research into all of this, it turns out that the answer is just working at the animation frame level.
CSS animations abstracts all of this away from devs but as a result it gives very little control between animations.
React Motion react-motion while a good library for dealing with transition animations (it's intended purpose) again does not address controls between animations.
They key though exists in the react-motion code. You just have to request animation frames one after the other using raf library and then calculate the animations per view using the common frame info. It's pretty tedious and no real generic solution here.
Related
I came across at a lot of this websites which have animations that get triggered throught the scroll. I actually at first thought we did it in javascript by calculating the position of the cursor relative to the website page we can through animations at each positions.
But when I did a bit of googling I found this stuff about Intersection Observer. Is there are any performance issue or something of sort to my visioned method?
NB: I am looking for a way to do it without a framework.
Before the Intersection Observer API you would listen for the scroll event and check the position of the elements with each scrolled pixel. That is performance heavy work and gets called a lot! Intersection Observers are designed to tackle this issue in a performant way. You won't get better performance from an alternative.
You don't need a framework. The API is native to your browser (considering you have support).
If you're looking for ready to use animations, then AOS library is a good example. There are lots of other libraries for animating on scroll.
I'm developing a PhoneGap/Cordova application with AngularJS. Since my target platform is Android I looked into different approaches for activity transitions. In other words; How to animate the transition between form A and form B while providing a native and intuitive user experience.
My application will be implementing the material design guidelines and I stumbled upon a transition animation called "shared element transition" which I think would work perfectly for most of my application flows.
I actually really like this approach and was wondering about how to achieve an implementation based on Angular 1.5 which is as generic and flexible as possible and easy to use across the application.
Since I'm still new to AngularJS, I wanted to check back with the community to find a neat way to implement something along the lines of the shared element transition or maybe get pointed to an already existing implementation.
For those wondering, I'm using Angular 1.5 and MaterializeCSS to empower my app. Thank you very much!
Check this tutorial (ready made component to use as well), it animates hero elements between different views and maintains proper routes.
http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html
To summarize, the hero element has to exist between the two views being transitioned. When transitioning, the hero element is temporarily hidden in the target view till the position animation ends. If the target view is being loaded directly (refresh, bookmark), no animation takes place and the hero element is there.
It is possible to optimize css animations with javascript , I'm developing a directive to create dynamic tabs and would like to implement animations between their transitions however css transitions demontram is very slow , there is a way to optimize them . My directive is available at: tab-nav-bar this version does not have support for animations, someone would have the idea of how best to implement it.
The most important thing to look for, when animatin things with CSS (or JS even) is to focus on the correct properties. Some of them cause the entire layout to be redrawn.
The most important thing to keep in mind is - animate transform properties, and not the 'left','right','width' etc.
You can read more about smooth animations in this article and a list of best properties to animate is found here.
Another way to use effective animations is to use a js animation library - like GSAP. It has a simple syntax and is very effective - here's a small demo of it's basic capabilities
Here's a small example of the GSAP syntax:
//pulsate the box using scaleX and scaleY
TweenMax.to(elementSelector, 1.2, {
scaleX:0.8,
scaleY:0.8,
force3D:true,
yoyo:true,
repeat:-1,
ease:Power1.easeInOut
});
And here's the home page of GSAP
I am looking for a javascript animation framework. I have found some:
http://www.pixijs.com/
http://phaser.io/
http://paperjs.org/
These all are good.
But I would like a GUI based animation creater framework, so that I can create translation, scale and frame animations. That will allow me easily create basic animations without having to write much code.
Something like cocos studio for cocos2d.
If you guys, know any such framework, please let me know. Thanks.
If you need some animations libraries, here are some good ones:
Greensock: https://greensock.com/
Velocity.js: http://julian.com/research/velocity/
If you want to create animations in a GUI, things to consider:
Adobe Edge (paid): https://creative.adobe.com/products/animate
Bouncejs: http://bouncejs.com/
CSS Animate: http://cssanimate.com/
I wrote a very simple library based on request animation frame that can basically animate anything you want as it only returns number values over specified time according to the specified easing.
https://github.com/alanbo/animate.js
I have created one, which is very simple and small
https://github.com/allenhwkim/jsanimation
Usage
import {slideInRight} from 'jsanimation';
slideInRight(el);
I am interested in creating various kinds and types of javascript animations using traditional javascript (no frameworks) and canvas. My question is can anyone point me to resources (books/sites etc) that would be useful. I know that many frameworks already exist but my learning object is to understand the core language.
Animation is basically an attribute change over time. To achieve this you use setInterval to make sure the change takes effect gradually. In every step you calculate the current value of an attribute by interpolating between two values, considering elapsed time. As a final touch you can add easing to your animations to make transitions look smooth between states. Animation queues can also be added.
Recommended - Roll Your Own Effects Framework by Thomas Fuchs
There is a plethora of articles discussing this, available on the intertubes.
One key technique is to use setTimeout() to modify the opacity of an item, stepwise. This is basically what jquery UI - one of the frameworks you mentioned - does to implement animations, fades, slideouts, etc.