Animation01
Card
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »
Stacked slides Sticky 100vh
Scroll progress0%
4 Slides
Slide 01Stacked
Stacked
Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Slide 02Stacked
Stacked
Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Slide 03Stacked
Stacked
Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Slide 04Stacked
Stacked
Slides
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
FreeStack
Stacked slides Sticky 100vh
Create stacked slides effect. Each section is position sticky, top 0, height 100vh.
Fade in on scroll
Card
Tech02
Card
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »
Design03
Card
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »
UX04
Card
04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »
Custom05
Card
05
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
« Lorem ipsum dolor sit amet, consectetur adipiscing elit. »
FreeReveal
Fade in on scroll
Fade elements in as they enter the viewport on scroll.
Simple parallax background slower
Simple
Parallax
Background moves at 40% speed
FreeParallax
Simple parallax background slower
Create a simple parallax effect. Background moves slower than the scroll.
Scroll progress indicator
ScrollStep 1/5
0%
CARD 01
01Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 02
02Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 03
03Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 04
04Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 05
05Lorem ipsum dolor sit amet, consectetur adipiscing elit.
FreeProgress
Scroll progress indicator
Create a scroll progress indicator.
Locked prompt
Scroll progress0%
5 Cards
Card 01
Card
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 02
Card
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 03
Card
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 04
Card
04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 05
Card
05
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Locked prompt
Scroll progress0%
5 Cards
Card 01
CARD
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 02
CARD
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 03
CARD
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 04
CARD
04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 05
CARD
05
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Locked prompt
Scroll progress0%
4 Cards
Section 01
CARD
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 02
CARD
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 03
CARD
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 04
CARD
04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Locked prompt
#1
Card 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
#2
Card 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
#3
Card 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
#4
Card 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
#5
Card 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Locked prompt
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit
Reveal: 0%
Locked prompt
Left → Right
Card 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Bottom → Top
Card 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Right → Left
Card 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Left → Right
Card 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Bottom → Top
Card 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Locked prompt
State : Fixed0%
Section
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Locked prompt
State : Fixed0%
Section
Animation
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
STEP 0101
Entrée
Le titre et la carte principale se révèlent quand la section est pinnée.
STEP 0202
Focus
Le contenu interne bouge et se transforme pendant que le scroll progresse.
STEP 0303
Sortie
La section se termine, l’animation finit et le scroll reprend normalement.
Locked prompt
STEP 011/4
Contexte
On pose le décor : un objectif clair, un problème concret.
- Qui est l’utilisateur ?
- Quel besoin ?
- Quelle contrainte ?
Locked prompt
Example
vs Example
Keep scrolling
Locked prompt
Example
Example
Far = slow • Mid = medium • Near = fast
Locked prompt
Mouse
+ Scroll
Same scene, two signals
Locked prompt
DOWNHeader hides on down, shows on up
Example effect
Example
Direction
Scrolling down hides the header and the card pushes to the right. Scrolling up reveals the header and the card moves to the left.
Lorem ipsum
lorem ipsum
Locked prompt
Fullscreen section
Section 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Fullscreen section
Section 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Fullscreen section
Section 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Fullscreen section
Section 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Locked prompt
Use keyboard arrow keys to navigate the carousel on desktop.
Active
1/4
Slide 01
Slide
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Slide 02
Slide
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Slide 03
Slide
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Slide 04
Slide
04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Lorem ipsum
Locked prompt
Progress0%
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Chapter 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 04
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 05
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 06
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 07
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 08
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 09
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 10
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 11
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 12
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 13
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Chapter 14
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Locked prompt
Only on Desktop
CARD 01
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 02
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CARD 03
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Locked prompt
Card 01
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 02
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 03
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 04
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 05
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 06
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 07
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.
Card 08
Example
Content
Lorem ipsum dolor sit amet.
Continue scrolling to “push” the cards to the left.