web app
Loaders.io
Loaders.io is a GUI to generate production code for a React loader component and allowing users to easily customize the style and animation properties.Take it for a spin
QuantityRotation
Easing
import { motion } from "framer-motion";
import React from "react";
const variants = {
start: {
scale: 0,
rotate: 0,
},
end: {
scale: 1,
rotate: 45,
},
}
transition={{
repeat: "Infinity",
repeatType: "reverse",
ease: "anticipate",
duration: 1,
delay: {0.2 * i}
}}
const style = {
width: "20px",
height: "20px",
margin: "8px",
display: "inline-block",
background: "#eb7085",
}
export default function Loader(props) {
return (
<motion.div>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
/>
<motion.div
style={style}
variants={variants}
initial={"start"}
animate={"end"}
/>
</motion.div>
)
}
PWA
Pulse
I wanted a workout tracker that offers only the features that I needed, and nothing else. It allows for recording workouts on a daily calendar, including quick links and historic info on how I performed for a given exercise previously.