Visual debugger for framer-motion

Related tags

React tracer-motion
Overview



Visual debugger for framer-motion



Demo

 

install

npm install tracer-motion --save-dev

# or

yarn add tracer-motion --dev

 

usage

import { motion } from 'framer-motion';
+ import { tracer } from 'tracer-motion';

function App() {
  return (
    <>
      <div>
-       <motion.div
+       <tracer.div
          className="box"
          initial={{ x: 0, rotate: 0 }}
          animate={{ x: 400, rotate: 180 }}
          transition={{ type: 'spring', stiffness: 50 }}
        />
      </div>
    </>
  );
}

 

like it?

this repo

 

license

MIT © siddharthkp

You might also like...

Careers page made with Next.js, Framer Motion & Tailwind CSS

Careers page made with Next.js, Framer Motion & Tailwind CSS

Careers Page Tech Stack: Next.js / Framer Motion / Tailwind CSS This is a Next.js project bootstrapped with create-next-app. Getting Started First, ru

Nov 16, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Node.js debugger based on Blink Developer Tools

Node Inspector Overview Node Inspector is a debugger interface for Node.js applications that uses the Blink Developer Tools (formerly WebKit Web Inspe

Dec 29, 2022

A pretty darn cool JavaScript debugger for Brackets

A pretty darn cool JavaScript debugger for Brackets

Theseus Theseus is a new type of JavaScript debugger for Node.js, Chrome, and both simultaneously. It is an extension for the Brackets code editor. Th

Dec 20, 2022

Well-formatted and improved trace system calls and signals (when the debugger does not help)

Well-formatted and improved trace system calls and signals (when the debugger does not help)

ctrace Well-formatted and improved trace system calls and signals (when the debugger does not help). Why? Awesome tools strace and dtruss have only on

Dec 27, 2022

Time-traveling debugger for Svelte applications

Time-traveling debugger for Svelte applications

DeLorean The first time-travelling debugger for Svelte applciations DeLorean is a debugging tool for Svelte developers. It records snapshots when a ta

Oct 8, 2022

WIP: Hevm based debugger for hardhat-huff projects

Huff Debug An easy hevm debug integration for hardhat-huff projects What does it do: Speed up your development experience by gaining rich feedback in

Jul 15, 2022

useOverlay uses floating-ui and framer-moting under the hood, giving you an API that provides great usability.

Create floating things easily useOverlay uses floating-ui and framer-moting under the hood, giving you an API that provides great usability. Warning D

Oct 24, 2022

Nodejs agent for Sidekick open-source live application debugger

Sidekick Agent NodeJS Sidekick agent Nodejs is a Nodejs library that communicate with Sidekick broker to inspect, monitor and debug your application o

Nov 8, 2022

A Front-End JavaScript Debugger

vDebugger · English | 简体中文 A Front-End JavaScript Breakpoint Debugger. Make it possible to debug your JavaScript in browser, Node.js, JavaScriptCore o

Nov 8, 2022

The motion graphics toolbelt for the web

mo · js – The motion graphics toolbelt for the web. Intro mo · js is a javascript motion graphics library that is a fast, retina ready, modular and op

Dec 29, 2022

Javascript and SVG odometer effect library with motion blur

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

A lightweight carousel library with fluid motion and great swipe precision

A lightweight carousel library with fluid motion and great swipe precision

Embla Carousel Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency

Jan 4, 2023

A motion hover effect for a background grid of images.

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Dec 31, 2022

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Nov 21, 2022

A speedy motion transition effect for an image slideshow.

A speedy motion transition effect for an image slideshow.

Motion Transition Effect A speedy motion transition effect for an image slideshow. Inspired by Ping Pong Slow Motion. Article on Codrops Demo Credits

Jul 5, 2022

Javascript and SVG odometer effect library with motion blur

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022
Owner
Siddharth Kshetrapal
design systems nerd, building ui-devtools and react-ui
Siddharth Kshetrapal
Tina is an open source editor that brings visual editing into React websites. Tina empowers developers to give their teams a contextual and intuitive editing experience without sacrificing code quality.

Tina is an open-source toolkit for building content management directly into your website. Community Forum Getting Started Checkout the tutorial to ge

Tina 8.2k Jan 1, 2023
Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Alan Vieyra 4 Feb 1, 2022
Visual layout editor for matplotlib and any plotting library built upon matplotlib like seaborn.

Matplotlib Layout Generator Before you start: You must have experience with using matplotlib. It needs to be use on desktop. Not designed for mobile.

null 4 Dec 1, 2022
A reusable react hook that preserves a components semantic accessibility to create a visual block link.

useAccessibleBlockLink is a reusable react hook that preserves a components semantic accessibility to create a visual block link. This hook supports multiple links within the same block.

Wayfair Tech – Incubator 4 Nov 28, 2022
Audio visual mitigation of Rickrolls using computer vision.

Computer Vision Rick Astley Muter This project utilizes an advanced computer vision model to mute your speakers when Rick Astley is detected on your s

Roboflow 9 Oct 20, 2022
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
A react and framer motion app to play some quizzes !

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Belkacem Berras 2 Jan 7, 2022
Portfólio de projetos pessoais feito com NextJs e lib de animação Framer Motion

Portfólio - Carlos Amorim Esse portfólio foi criado para mostrar meus projetos e habilidades. ?? Projeto criado com as seguintes tecnologias: ✔️ NextJ

Carlos Amorim 13 May 12, 2022
My personal website built with Next.js, TypeScript, twin.macro, Framer Motion, MDX and deployed on Vercel.

chrvaskos.com My personal website / blog built with some of my favorite technologies where I can showcase my work and write articles about anything ne

Vasilis Christoforidis 4 Mar 25, 2022
Starter kit with Next.js, Chakra-UI, Framer-Motion in Typescript. Internationalization, SEO, Components, Theme (dark/light) and more...

Typescript Next.js Chakra-UI Framer-Motion Starter Kit Start with a powerful template ⚡️ Table of contents Getting started Paths & Files Useful depend

Alexandre Gossard 40 Jan 7, 2023