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

Quantity

Rotation

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>
  )
}

website

La Dimora

La Dimora is a holiday home located at lake Como in Lombardia, Italy. The website was designed to provide information about renting the home and about the area.

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.