Skip to content

Instantly share code, notes, and snippets.

@guillermo guillermo/useAnimation.js Secret
Created May 13, 2019

Embed
What would you like to do?
react animation number transition Kalena Date transition easeInOutQuad for kalena.app https://blog.kalena.app/day-7/
import {useState} from 'react'
// https://gist.github.com/gre/1650294
export const EasingFunctions = {
// no easing, no acceleration
linear: function (t) { return t },
// accelerating from zero velocity
easeInQuad: function (t) { return t*t },
// decelerating to zero velocity
easeOutQuad: function (t) { return t*(2-t) },
// acceleration until halfway, then deceleration
easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
// accelerating from zero velocity
easeInCubic: function (t) { return t*t*t },
// decelerating to zero velocity
easeOutCubic: function (t) { return (--t)*t*t+1 },
// acceleration until halfway, then deceleration
easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
// accelerating from zero velocity
easeInQuart: function (t) { return t*t*t*t },
// decelerating to zero velocity
easeOutQuart: function (t) { return 1-(--t)*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
// accelerating from zero velocity
easeInQuint: function (t) { return t*t*t*t*t },
// decelerating to zero velocity
easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
// acceleration until halfway, then deceleration
easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}
export const useTimer = () => {
const [progress,setProgress] = useState(0);
function start(duration = 500){
var startAt = new Date()
function frame() {
let progress = (new Date() - startAt) / duration
if(progress >=1) {
setProgress(1)
return
}
setProgress(progress)
requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
}
return [progress, start ]
}
export const useAnimationFunction = (fn = EasingFunctions['easeInOutQuad']) => {
const [progress, start] = useTimer()
return [fn(progress), start]
}
export const useAnimatedValue = (initial, duration = 1000) => {
let [animation, setAnimation] = useState({from: initial*1, to:initial*1});
let [progress, start] = useAnimationFunction()
let value = animation.from + (animation.to - animation.from) * progress;
function Start(newValue) {
setAnimation({from: value * 1,to: newValue * 1})
start( duration)
}
return [value, Start]
}
export const useAnimatedVector = (initialRange,duration = 1000) => {
let [animation, setAnimation] = useState({from: initialRange, to:initialRange});
let [progress, start] = useAnimationFunction()
function Start(newRange) {
setAnimation({from: value ,to: newRange})
start(duration)
}
let value = animation.from.map((from,index)=>{
let to = animation.to[index]
return from + (to - from) * progress;
})
return [value, Start]
}
export const useAnimatedDateVector = (initialRange,duration=1000) => {
let [range,start] = useAnimatedVector(initialRange.map((date)=>(date.getTime())), duration);
let dateRange = range.map((time) => new Date(time));
function startDate(newDateRange) {
let range = newDateRange.map( (date) => (date.getTime()) );
start(range);
}
return [dateRange,startDate];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.