Creating a Smooth Entrance Animation

Add to favorites

Step-by-Step Guide to React Native Entrance Animations

Build a React Native app with Claude AI

Introduction

3:37

Mastering Responsiveness in Figma

11:14

Design to Code with Locofy

10:55

Using Git for Version Control

12:57

Integrating Claude AI into Your Workflow

18:33

Mastering Reanimated: A Step-by-Step Guide to Animation

15:59

Introduction to Cursor: The AI-Powered Code Editor

15:04

How to Implement a Figma Prototype: Step-by-Step Guide

10:16

Creating a Smooth Entrance Animation

10:32

Understanding Screen Navigation Structure

10:34

Implementing Navigation and Animations

10:11

Navigation and Component Architecture

10:17

Handling Back Navigation and Parameter Passing

11:09

Introduction to Interaction Design with Animated Menus

10:43

Handling User Interaction and Animations

9:13

Modal’s Components and Linear Gradient

11:11

Using State and Coordinates to Control Animations

10:13

Implementing Mode Switch Animation and Gradient Effects

9:33

How the AnimatedText Component Uses Animation for Mode Switching

11:10

How to Develop a Toggleable Defrost Component with Animation

11:52

Building a Custom Segmented Control for Fan Settings

10:29

Understanding the TemperatureControl Component Structure

12:59

How TemperatureSetting Manages State and Interacts with Parent Components

12:26

Implementing Animated Temperature Presets

12:27

Introduction to React Native Gesture Handler and RootView Setup

11:38

Building an Interactive Modal: Drag Gestures and Smooth Animations

12:50

Accurate Layout and Gesture Control

17:15

Enhancing Temperature Control with Gesture-Based Interactions

9:54

In this section, we will learn how to implement the entrance animation for the presentation modal. Let's begin with the Modal1.tsx file.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Browse all downloads

Introduction

Discover the power of Locofy and Claude Sonnet 3.5 in building dynamic React Native apps.

3:37

Mastering Responsiveness in Figma

Understanding the Basics of Responsive Design

11:14

Design to Code with Locofy

Design to Code Made Easy with Locofy

10:55

Using Git for Version Control

Introduction to Git: Essential Version Control Techniques

12:57

Integrating Claude AI into Your Workflow

Optimizing Your Workflow with Claude AI and VS Code

18:33

Mastering Reanimated: A Step-by-Step Guide to Animation

The Ultimate Step-by-Step Guide to Reanimated Animations

15:59

Introduction to Cursor: The AI-Powered Code Editor

Explore Cursor: a next-gen code editor with AI integration, context-aware code suggestions, Git control, and real-time project assistance

15:04

How to Implement a Figma Prototype: Step-by-Step Guide

Best Practices for Implementing Figma Prototypes

10:16

Creating a Smooth Entrance Animation

Step-by-Step Guide to React Native Entrance Animations

10:32

Understanding Screen Navigation Structure

Mastering React Native Screen Navigation: Best Practices

10:34

Implementing Navigation and Animations

Step-by-Step Navigation and Animations in React Native

10:11

Navigation and Component Architecture

Understanding Navigation and Component Architecture in UI Design

10:17

Handling Back Navigation and Parameter Passing

Managing Screen State and Transitions

11:09

Introduction to Interaction Design with Animated Menus

The Role of Animation in Enhancing User Interaction

10:43

Handling User Interaction and Animations

Deep Dive into RightMenu Component’s Animation and Interaction Logic

9:13

Modal’s Components and Linear Gradient

Exploring the Mode Component Functionality

11:11

Using State and Coordinates to Control Animations

Animating Background Transitions Based on State Changes

10:13

Implementing Mode Switch Animation and Gradient Effects

Understanding the return Structure and LinearGradient's Properties

9:33

How the AnimatedText Component Uses Animation for Mode Switching

Overview of the AnimatedText Component's Functionality and Props

11:10

How to Develop a Toggleable Defrost Component with Animation

Implementing State Management and textStyle for Dynamic UI

11:52

Building a Custom Segmented Control for Fan Settings

Handling User Interaction with Pressable

10:29

Understanding the TemperatureControl Component Structure

How Event Handlers Manage Temperature State Changes

12:59

How TemperatureSetting Manages State and Interacts with Parent Components

Handling Temperature Changes via Callbacks

12:26

Implementing Animated Temperature Presets

Handling User Interaction with Callback Functions

12:27

Introduction to React Native Gesture Handler and RootView Setup

Understanding the Role of GestureHandlerRootView

11:38

Building an Interactive Modal: Drag Gestures and Smooth Animations

Using onLayout to Dynamically Capture Element Heights

12:50

Accurate Layout and Gesture Control

Best Practices for Handling Margins and Spacing in Modal Components

17:15

Enhancing Temperature Control with Gesture-Based Interactions

Using useRef and useState to Manage State and Animation

9:54

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Akson Phomhome

UI Designer

Designer at Design+Code.

12 courses - 55 hours

Build a SwiftUI app with Claude AI

This comprehensive SwiftUI course combines cutting-edge AI assistance with hands-on development, guiding you through the process of transforming Figma designs into fully functional iOS applications. Leveraging Claude 3.5 Sonnet, you'll learn to efficiently generate and refine SwiftUI code, create reusable components, and implement advanced features like animations and responsive layouts.

5 hrs

Prototype and Code iOS apps in Figma and SwiftUI

Welcome to our course on designing a sleek wallet interface with Figma! You’ll learn to create a visually appealing and functional wallet interface using DesignCode and Apple UI Kits. Master prototyping, swipe gestures, carousel animations, overlays, and reusable components. Plus, explore a Figma plugin to easily transition from design to SwiftUI. By the end, you’ll create dynamic, user-friendly prototypes.

3 hrs

Create 3D UI for iOS and visionOS in Spline

Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI

3 hrs

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

Web App Design using Midjourney and Figma

Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma

2 hrs

UI Design for iOS 16 in Sketch

A complete guide to designing for iOS 16 with videos, examples and design files

3 hrs

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

UI Design Smart Home App in Figma

Design a Smart Home app from scratch using various tricks and techniques in Figma

2 hrs

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs