K O logo
Web Development

Project WebApp — Declarative animations with react-pose

Author

Kalle

Date Published

This AI-generated image presents a highly creative and futuristic workspace centered around data visualization and coding, particularly with a focus on React.js. The main scene features a large monitor displaying a 3D grid or terrain model, surrounded by colorful data visualizations and graphs on additional screens. The desk is cluttered with various tech gadgets, including a laptop, a drawing tablet displaying more data visualizations, a coffee mug with the React logo, and small robotic figures. The wall behind the monitor is adorned with floating, glowing spheres and geometric shapes, contributing to the high-tech, almost otherworldly atmosphere. A desk lamp casts a warm light on a potted plant, adding a touch of natural life to the otherwise digital-centric environment. The overall aesthetic combines elements of advanced technology, creativity, and data science in a visually striking and immersive setting.

In general animating the view is hard, because suddenly the state is dependent on time. Views can exist longer than they existed before because of exit animations, or some layouts must wait for other elements to take their place. And animations are expensive, so don't do too much and whenever possible you should use hardware accelerated key-frame animations or transitions. But sometimes the animations get a little more complex and are difficult to handle with pure CSS and style rules. Then it's time to take some animation library to help.

One of the large goals of react is to describe as much of the app in a declarative way, for styling the styled-components workflow is working really good and react-pose has a similar API to animate components. Instead of styles you define different "poses" the component can have and define how the transitions of values between the poses should work.

For example a sidebar component which can be hidden on the left side of the screen would look like this: 

1import posed from "react-pose";
2
3const Sidebar = posed.nav({
4  open: {
5    x: "0%",
6    // animate child components with 100ms between entries
7    staggerChildren: 100,
8  },
9  closed: { x: "-100%" },
10});
11
12const NavItem = posed.li({
13  open: { opacity: 1 },
14  closed: { opacity: 0 },
15});
16
17export default ({ isOpen, navItems }) => (
18  <Sidebar pose={isOpen ? "open" : "closed"}>
19    <ul>
20      {navItems.map(({ url, name }) => (
21        <NavItem>
22          <a href={url}>{name}</a>
23        </NavItem>
24      ))}
25    </ul>
26  </Sidebar>
27);

If you want to have enter and exit animations you need a Wrapper Component managing newly created and disappearing components. With react-pose you can use the PoseGroup to manage posed components. Every direct child of a PoseGroup will get the poses enter and exit and needs a unique key prop to enabled tracking of the elements. 

1const Item = posed.div({
2  enter: { opacity: 1 },
3  exit: { opacity: 0 },
4});
5
6const ItemList = ({ items }) => (
7  <PoseGroup>
8    {items.map((item) => (
9      <Item key={item.id} />
10    ))}
11  </PoseGroup>
12);

As an exercise try to rebuild this animation from dribble, a working result could look like this:

video:

You can use this repository as a basis.

Tasks

  • identify all moving elements in the dribble design
  • define poses for all UI states
  • define transitions for all pose changes
The AI-generated image depicts a futuristic, tech-themed workspace filled with servers, monitors displaying code, and various tech gadgets. A glowing orb sits atop a central server rack. The scene is adorned with symbols resembling atoms and tech logos, creating a high-tech, sci-fi atmosphere.

Project WebApp — React on the server and the JAMstack

Learn how to render React components on the server using react-dom/server and frameworks like Next.js. This guide also explores the JAMstack architecture, highlighting tools such as Gatsby for creating static sites with dynamic capabilities.

This AI-generated image presents a futuristic, high-tech workspace focused on web development, particularly using Firebase and React.js. The room is dominated by large, holographic displays on the walls, showcasing various data visualizations, code snippets, and icons related to Firebase services like Real-Time Database and Firestore. The central display features a glowing React logo hovering over an image of Earth, symbolizing global connectivity. Several workstations with multiple monitors are arranged around the room, each displaying lines of code. The workspace is bathed in warm, golden light, creating a sophisticated yet dynamic atmosphere. Additional details include a coffee mug with the React logo, a touch-sensitive table with holographic controls, and a few potted plants, adding a touch of greenery to the sleek, modern environment. The scene highlights the integration of cutting-edge technology and web development tools in a highly organized and visually immersive setting.

Project WebApp — Get firebase to sync your data

Learn how to sync data in your web app using Firebase's realtime database. This guide covers setting up Firebase, configuring anonymous authentication, and using Firebase to manage and sync data efficiently across clients.

This AI-generated image portrays an ultra-modern, futuristic control room or workspace, heavily themed around React.js and advanced programming concepts. The central focus is a large, curved desk filled with multiple screens, all displaying complex code, diagrams, and digital interfaces. Above the desk, an enormous React logo emits a bright, glowing light, with streams of data flowing from it, symbolizing state management or data flow. The walls are lined with large monitors showcasing various coding snippets, keywords like "Memoize," "State," "Middleware," and "Custom Updates," all related to React and JavaScript development. The room is bathed in a mix of cool blue and warm sunset lighting, creating a high-tech yet serene atmosphere. A few playful elements, such as a rubber duck on the desk, add a touch of whimsy to the otherwise sophisticated and immersive environment, blending creativity with cutting-edge technology.

Project WebApp — Taking control over state-changes

Explore how to manage state changes in JavaScript using RxJS. This guide introduces observables, subjects, and operators like map and catchError, showing how to handle data streams efficiently and integrate them with React components.

This AI-generated image features a visually striking and meticulously organized workspace with a focus on React.js and Redux development. The centerpiece is a large monitor displaying a colorful, layered data flow diagram, accompanied by lines of code. The desk is filled with items like a Rubik's cube, sticky notes, a coffee mug with the React logo, and a tablet showing additional code. The background wall is covered with diagrams, flowcharts, and keywords such as "Actions," "Reducer," "State Management," and "Redux," all related to the state management concepts in React and Redux. The lighting is a mix of cool and warm tones, creating a dynamic atmosphere that emphasizes productivity and creativity in web development. The overall scene is both educational and aesthetically pleasing, reflecting a deep engagement with coding and software design.

Project WebApp — State management in a react app

Learn to manage state in React using built-in state APIs, focusing on immutability and single sources of truth. This guide covers setState basics, best practices, and introduces Redux for complex state management with practical examples

This AI-generated image depicts a vibrant and meticulously arranged workspace with a strong focus on design and coding. The centerpiece is a tablet displaying a colorful, layered 3D design with coding elements, surrounded by various items such as a custom rainbow-colored keyboard, a smartphone showing a color wheel, and an open notebook with design sketches. The desk is adorned with color palettes, pencils, sticky notes, and other creative tools, all organized in a visually appealing manner. The background features a soft gradient of pink and purple, enhancing the colorful and creative atmosphere. The React.js logo appears prominently on several items, emphasizing the theme of web development and design. The overall scene exudes creativity, organization, and a passion for both coding and design.

Project WebApp — How to style react

Learn how to style React components using various approaches, including inline styles, styled-components, glamorous, and emotion. This guide explains each method's benefits and provides practical examples to help you implement component-based styling efficiently in your React applications.

This AI-generated image depicts a highly organized and visually appealing workspace with a strong focus on React.js development. The scene is centered around a large computer monitor displaying code and a central React logo, accompanied by a laptop also displaying code. The desk is cluttered with various items including an open notebook filled with diagrams, a coffee mug, sticky notes, plants, and a blue desk lamp. The wall behind the monitor features several React logos, along with terms like "UseState," "UseEffect," and "UseContext," which are key concepts in React. The overall aesthetic is modern and tech-focused, with a consistent blue and yellow color scheme that ties all elements together, emphasizing a clean and productive coding environment.

Project WebApp — From code to UI - Introduction to React.JS

Get started with React by learning to create UI components using JSX. This introduction covers the basics of setting up a React environment, creating simple components, and understanding JSX syntax. Learn how to build interactive web applications efficiently with practical examples.

This AI-generated image showcases a neatly arranged workspace centered around a large computer monitor displaying lines of code. The desk is organized with books, a coffee mug, a yellow desk lamp, and a few potted plants, creating a warm and inviting atmosphere. Behind the monitor, a wall is covered with various diagrams and keywords related to programming concepts such as "Pure Functions," "Map," "Reduce," "Filter," and "Immutability." The visual style is clean and modern, with a strong focus on coding and functional programming themes, blending educational elements with a cozy workspace vibe.

Project WebApp — Functional programming with JavaScript

Learn the basics of functional programming in JavaScript, including pure functions, higher-order functions, and declarative programming. This guide offers practical examples and exercises to help you create efficient, maintainable code.

This AI-generated image presents a meticulously organized workspace from a top-down perspective, focusing on web development and coding tools. In the center is an open laptop displaying lines of code, surrounded by various items such as a notebook labeled "HTML" and "JS," coding-related icons, a smartphone with code on the screen, and other office supplies. The workspace includes browser icons, a mouse, and other objects that are carefully arranged to create a balanced and visually appealing composition. The overall scene emphasizes a blend of digital creativity and precision.

Project WebApp — Basics and Tools

First steps in web development: learn the basics of HTML, CSS, and JavaScript, and essential tools like Babel, Webpack, and Node.js. Set up a development environment with Visual Studio Code, ESLint, Prettier, and Git. These fundamentals ensure efficient web application development.

Mailing List

If you want to receive updates on new posts, leave your email below.