Interface Animations

Animations & Interactions

Interpolatie

We vullen automatisch waarden aan tussen een begin en een eind waarde

Interpolatie

We voegen extra punten toe, ook wel keyframes genoemd, om tussen deze punten interpolatie te berekenen

Smoothing

• We gebruiken smoothing (afvlakking) om een animatie er vloeiender te laten uitzien d.m.v. een vertraging
• Een animatie on scroll kan er anders uitzien
  • Trackpad
  • Scroll wiel (hakkelig)
  • Snelle verandering in het scrollen
• We lossen dit op met behulp van de hoeveelheid (in %) smoothing

Smoothing

Zoek in het interactie paneel bij je interactie naar Smoothing

Interacties

• Animaties worden gestart d.m.v. een interactie
  • Interactie of wisselwerking is het op elkaar reageren door zaken, processen, personen, etc.
• De start van een interactie is een ​trigger

Interacties

• In Webflow kennen we twee soorten triggers
  • ​Element triggers, wanneer we in interactie gaan met een element zoals hovering, klikken, etc.
  • Page triggers, wanneer er iets verandert in de status van een pagina zoals laden, scrollen, etc.

Element triggers

• Interacties voegen we toe via het interactions panel
• Element triggers zijn
  • Mouse click, animeert het element of een ander element bij een eerste of tweede klik
  • Mouse hover, animeert wanneer de cursor over of weg van een element beweegt
  • Scroll into view, animeert wanneer een element zichtbaar wordt in de viewport
  • While scrolling in view, animeert terwijl we scrollen in de viewport

Page triggers

• Interacties voegen we toe via het interactions panel
• Element interacties zijn
  • Mouse move in viewport, animeert wanneer de muis beweegt in de viewport langs de X en Y as
  • While page is scrolling, animeert element wanneer de pagina scrollt van onder naar boven
  • Page load, animeert wanneer de pagina starts en eindigt met laden
  • Page scrolled, animeert wanneer we van boven naar onder scrollen

Element Triggers

Mouse Click

Webflow University

Mouse Click

Mouse Click

Mouse Click

Mouse Click

Een element tonen of verbergen door een klik of tap-trigger

1. Selecteer het element
2. Ga naar het interactie-paneel
   
   
    
3. Bij Timed Animations klik je op plus

Mouse Click

• Geef je animatie een naam
• Selecteer in je canvas het element dat je wenst te verbergen of tonen
• klik plus en selecteer hide/show, selecteer onderaan het oogje met een streep door. Vink - set as initial state - aan
• Klik plus voor het einde van de animatie en selecteer display block
• Save

Demo accordion

Tekst: Cupcake Ipsum        Icon: Icons8

Demo accordion

Tekst: Cupcake Ipsum        Icon: Icons8

• section
  • container
    • div (card-container)
      • div (card-header)
        • heading h2
        • img (icon)
      • div (card-content)
        • paragraaf

Element Triggers

Mouse Hover

Webflow University

Mouse Hover

Een animatie starten als we hoveren over een element

Icons8: heart.     Unsplash: img 

Mouse Hover

We maken een div met een img en plaatsen die overflow:hidden                        , als buiten de div wordt onzichtbaar

We gebruiken Move  om het hartje van links naar rechts te bewegen

Mouse Move

Een animatie starten op basis van ons muis positie

Mouse Move

Een animatie starten op basis van ons muis positie

1.  Perspectief toepassen op het parent-element. Als je wenst de bewegen over de Z-as dan moet je perspectief toepassen.
2. Trigger: Mouse Move over Element
3. Maak een nieuwe animatie

Mouse Move

We animeren over de X en de Y-as

Mouse X Actions

0% : Y-rotate -10deg

100% : Y-rotate 10deg

Mouse Y Actions

0% X-rotate -10deg

100% : X-rotate 10deg

X-as

Y-as

0%

100%

100%

Oefening

Maak het volgende zo goed mogelijk na:

Unsplash: img     Blauwe kleur: #356998

Intermezzo

TikTok

Element Triggers

Scroll into view

Webflow University

Scroll into view

Een animatie starten scrollen into view

Oefening

Maak onderstaand zo goed mogelijk na, wanneer de card in het scherm komt zal hij naar boven gaan voor een +/- 100px en van 0 naar 100% transparantie gaan.

Unsplash: img     img    img 

Element Triggers

While scrolling in view

Webflow University

Parallax Effect

Elementen in de voorgrond bewegen sneller dan elementen in de achtergrond

Demo

Zie uitgewerkt voorbeeld

Voorbereiding

• Download de afbeeldingen assets en importeer in Webflow
• Maak drie secties:
  • Header Section
  • AvatarsSection
  • Footer Section
• AvatarSection is 250vh
  • position: relative

Voorbereiding

• Header en Footer:
  • Height: 100vh
  • Position: relative
  • Z-index: 999
  • BGcolor Header: #000000 / BGcolor Footer: #8b37fe
  • Display: flex
    • Justify: center
    • Align: center

Kleur verloop

• Maak een kleurverloop voor een nieuwe div (avatarFader) binnen in de AvatarsSection
• avatarFader settings:
  • Position: absolute
    • 0%, 0%, Auto, 0%
  • Linear gradient: #000000 --> #8b37fe
  • Height: 800px
  • Z-index: 0

Avatar

• Maak een Div element Avatar binnen AvatarsSection
  • Position: absolute
  • Width: 270px / Height: 331px
  • Box Shadow: Outer; 6px, 20px, 12px; rgba(0,0,0,0.15)
• Dupliceer Avatar 11 keer
• Sleep in elke Avatar een unieke afbeelding
• Geef elke Avatar een uniek nummer van 01 --> 11

Avatars

Pas elke Avatar ​aan met volgende gegevens

Parallax Effect

• We zetten een While scrolling in view interactie op de AvatarsSection
• Action: Play scroll animation
• Voeg een nieuwe animatie toe

Parallax Effect

• We verplaatsen (Move) elke afbeelding volgens de Y-as
  • Selecteer elke Avatar en voeg een Move actie toe
  • Zet Transform Y overal op 0px

Parallax Effect

Dupliceer nu alle keyframes en versleep ze naar 100% (einde scroll). Pas Transform Y aan met:

Afwerking

• Je kan de website afwerken door nog een Heading in het midden te plaatsen

Oefening

• Probeer zelf het Parallel effect uit met dit voorbeeld van Apple

Page Triggers

Page load

Webflow University

Demo

Zie uitgewerkt voorbeeld

Voorbereiding

• Download het Apple logo en importeer in Webflow
• Maak één sectie:
  • AppleLogo
    • Image
• Centreer met flex

Animatie

• Voeg een nieuwe Page Load actie toe
• Twee soorten acties:
  • When page starts loading
  • When page finishes loading
• Voeg een animatie AppleLoaded toe wanneer de pagina klaar is met laden

Animatie

• Selecteer AppleLogo en configureer eerste de initiële state:
  • Met Translate Y duw je het logo naar beneden met 40px
  • Met Opacity maak je het logo onzichtbaar
• Vergeet niet het vinkje Set as initial state aan te duiden

Animatie

• Maak nu de end state
  • Met Translate Y duw je het logo naar boven met 40px
  • Met Opacity maak je het logo opnieuw zichtbaar
• Kies hoelang de animatie moet duren, bijv. 1 seconde

Page Triggers

While page is scrolling

Webflow University

Demo

Zie uitgewerkt voorbeeld

Voorbereiding

• Download de Apple Storyline assets en importeer in Webflow
• We werken verder op de Page Load demo
• Maak twee extra secties:
  • AppleLogo
  • Story
  • Footer Section

Hoe werkt het?

• De magie zit hem in position: sticky
• We scrollen in feite een div block, waarbinnen we animeren, naar beneden
• Hoelang we scrollen is afhankelijk van de hoogte van de parent container
• De sticky div block is even hoog als de viewport

Hoe werkt het?

Header

Footer

Sticky Content

500vh

100vh

100vh

700vh

100vh

0%

100%

Parent Container

Footer

• Maak de footer 100vh
• Voeg een div met een afbeelding van Steve Jobs toe en positioneer deze met flex onderaan

Story

• Maak een Story container en positioneer deze relatief
• We scrollen 5 viewport hoogte naar beneden tijdens onze animatie, d.w.z. dat onze Scroll Container 500vh zal innemen
• Binnen de Scroll Container maken we de Sticky Container die we naar beneden zullen duwen

Story

• De Sticky Container is 100vh hoog en wordt op 0px van de top gepositioneerd (t.o.v. de relatieve Story container)
• De content binnen de Sticky Container aligneer je horizontaal en verticaal via flex 

Story Bullet Point

• Maak een Story Bullet Point met daarbinnen een text element
• Dupliceer een bullet point twee maal en geef ze een unieke naam

Animatie

• Animeer met een trigger op het Story element
• Kies voor While scrolling in view
• Maak een nieuwe animatie story animation

Animatie

• We scrollen over een hoogte van 500vh
  • 0% - 100%
  • De eerste en laatste fase nemen ook tijd in beslag
  • We animeren tussen 20% - 80%, m.a.w. 20% per animatie
• We animeren per Story Bullet Point
  • Move (van 40px naar 0)
  • Opacity (van 0% - 100% - 0%)

Wat nu?

• Je beschikt nu over de basis van storytelling via scrolling
• Wil je meer leren? Clone en analyseer dan dit project

Oefening

Dit voorbeeld kan je maken met letters en dezelfde animatie techniek

Page Triggers

Page scrolled

Webflow University

Page scrolled

De animatie zal starten wanneer we naar boven of naar benden beginnen scrollen

1. Plaats navigatie fixed of sticky
2. Voeg interactie toe op 'Page Scrolled'
3. Voeg een move animatie toe