This repository holds the code for the interactive coding part of the Motion Workshop with React Spring. Read the documentation to get the app up and running. Next to that, some things are setup for you to start animating!

Motion Workshop was bootstrapped with Create React App. You can find the demo here

First FORK this repository.

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Although React Spring offers a simple API, some things might be a bit confusing. In src/utils/getAnimationConfiguration.js you can find a utilites that simplifies the configuration.

This utility can receive a couple of parameters:

import { config } from 'react-spring'

...

{
    from: { transform: 'translate3d(0, 0.5rem, 0)', opacity: 0 },
    to: { transform: 'translate3d(0, 0rem, 0)', opacity: 1 },
    physics: { ...config.wobbly, tension: 170 }, // basic React Spring configuration extended
    delay: 200,
    isActive: true
}

• from Object: CSS properties to animate from
• to Object: CSS properties to animate to
• isActive Boolean: Whether to flip the animation
• physics Object: React spring physics configuration object. Please refer to React spring Common API documentation for possibilities
• delay Number: Delay in animation to account for Carousel in and out timing

Data for the carousel is already setup for you. Please feel free to make this your own in src/data/carouselItems.json

You can find all of the code for the Carousel in src/components/Carousel/Carousel.js. As you can see, in CarouselItem (located in the same file) you can configure the animations using the getAnimationConfiguration utility.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.