Create Scrolling Animations Used On Apple Product Pages | Award-Winning Websites Tutorial

preview_player
Показать описание
This tutorial will use Dora to rebuild an Apple Air Pods Pro website, covering the Keyframe [Drivers], Constraint layout, Image sequences and Component features. Dora will help you easily create complex scroll animation at ease and boost your efficiency in creating Top’s world websites.

00:00 Introduction
00:29 Building navigation bar with components
01:45 Explaining feature "constraint layout"
05:07 Laying out the hero section
06:37 Importing image sequence
08:12 Explaining the concept of "viewport height"
10:38 Creating scroll animation
10:54 Explaining feature"driver"
18:04 Building section 2
19:45 Creating section 2 scroll animation

👩‍🚀 Try Dora
Copy the project in Dora:

⬇️ See the live site

☎️ Join The Community
  1. Dora
Рекомендации по теме
Create Scrolling Animations 0:22:18

Create Scrolling Animations Used On Apple Product Pages | Award-Winning Websites Tutorial

Image Sequence On 0:00:18

Image Sequence On Scroll Animation with Elementor and Scrollsequence WordPress Plugin

Subtle, yet Beautiful 0:05:04

Subtle, yet Beautiful Scroll Animations

Incredible scroll-based animations 0:32:23

Incredible scroll-based animations with CSS-only

Full Page Website 0:14:10

Full Page Website Scroll Animation for Dribbble

Elementor Scroll Animation 0:00:19

Elementor Scroll Animation

Scroll animation using 0:00:13

Scroll animation using JavaScript

How to create 0:00:24

How to create a Scroll Animation project for your Website

Animate On Scroll 0:05:01

Animate On Scroll With CSS

Create Fancy Scrolling 0:24:10

Create Fancy Scrolling Animations Used on Apple Product Pages

Let’s Make One-of-those 0:13:13

Let’s Make One-of-those Fancy Scrolling Animations Used on Apple Product Pages with JavaScript

Animation On Scroll 0:16:23

Animation On Scroll | HTML CSS & Javascript

Scroll-based Animations for 0:11:01

Scroll-based Animations for WordPress (A lightweight, CSS-only solution! No Plugins or JavaScript!)

Framer Scroll Animations 0:09:38

Framer Scroll Animations For Beginners

Parallax Scroll Animation 0:06:35

Parallax Scroll Animation in 6 Minutes (Figma Tutorial)

Mastering Scroll Animations 0:23:02

Mastering Scroll Animations with GSAP ScrollTrigger

Advanced Scroll Animation 0:13:01

Advanced Scroll Animation in 13 Minutes (Framer Tutorial)

Learn to create 0:00:19

Learn to create a Beautiful Scroll Animation [Tutorial]

How To Create 0:35:26

How To Create This Unbelievable CSS Scroll Animation

Create SICK Video 0:12:17

Create SICK Video Scroll Animations in Framer

3D Scroll Animations 0:12:55

3D Scroll Animations Have Never Been Easier! React Fiber + Next.js 14 Tutorial

Framer Tutorial: Advanced 0:23:21

Framer Tutorial: Advanced Scroll Animation (ZERO Code)

Create Modern Text 0:20:43

Create Modern Text Scroll Animations 🖱️

Effortlessly Create Scroll 0:06:48

Effortlessly Create Scroll Animations with the Intersection Observer API

Комментарии
Автор

My brain hurts after watching this video 😂

dannydappa
Автор

but still, how do you create redirectable buttons? if you want them to be useful not only a pic?

isoppys
Автор

It's looks like a figma😍but it's 3d effects😍😍😍😍

alikahb
Автор

Hi, I am not getting what you are doing with rectangle, can you please explain each everything.

phoenixtechzone-zllj
Автор

Is there a way to make Dora website mobile compatible?

ajawahau
Автор

is it possible to upload a website built on Dora to wordpress?

vickiewondazstudios
Автор

Wait. This didn’t really explain how to create the headphones to be able to spin them, how to get the video, if it needs to be transparent background. Where you get the particles graphics from. 😭 so many questions lol

djknock
Автор

ce serai cool d'investir sur une formation en Français svp

eidemgargouri
Автор

Can you please share the image assets?

rishabhsinghdesign
Автор

I couldn't follow the tutorial quite well. That recording bar blocks the left part of the Layers section. As much as I would have followed her Airpods example, I made my own website. It took me several repeats, back and forth to do exactly how she did with the Airpods. Nice tutorial nevertheless.

dexcruz-cuzo