Learnreact Design - Prototyping With React + Framer

An accelerated ride to a new galaxy of creativity. Are you familiar with HTML / CSS but new to JavaScript or React? This course is especially for you! Save time! Study only what is important.


12 modules, 18 selected examples

• Javascript : ES6
• React : Components, Hooks, State, Props
• Framer : Framer Motion, Overrides, Workflow

1. Getting started

• basics of programming
• JSX vs HTML

2. Toggle

• objects, functions, variables, arrays, array destructuring
• styling components
• animation, transition, options

3. Slider

• objects, scope, conditions
• component composition
• drag, animate, transform

4. Parallax with mouse

• expressions, data types
• onMouseMove, hooks, the true face of JSX
• useMotionValue, useTransform

5. Tinder Swipe

• Arrow functions, trinary operator, array.map
• onMouseMove, Hooks
• useMotionValue, useTransform, useSpring

6. Radio Group

• object destructuring
• state, debug, components - printers, custom hooks
• the true face of useCycle

7. Animation

• async / await, promise
• step animation, keyframes

8. Parallax scrolling

• custom hooks
• useParallax hooks, useMotionValue

9. Framer X

• overrides, property management, design and code components

10. Stock schedule

• JSON import, data fetch, object iteration, array functions, error handling
• useEffect, conditional rendering

11. Framer Motion

• mount and unmount, "key" prop
• motion tags, AnimatePresence, positionTransition

12. SVG animation

• Math functions
• motion.path, pathLength, pathOffset, onPan