WebMotion

Webmotion | Wie zijn jullie Tom Harms | DEVBABBL

Wie zijn jullie

Webmotion | Wie ben ik Tom Harms | DEVBABBL

Frontend developer bij digitaal bureau Elephant

Tom Harms

WebMotion | WebPerformance junkie

Fitness | Speciaalbier | Formule 1

Klanten waarvoor ik heb gewerkt

Webmotion | Inhoud Tom Harms | DEVBABBL

Geschiedenis van WebMotion
Voorbeelden en waarom deze belangrijk zijn
Welke animatietechnieken zijn er
Welke animatie libraries kan jij gebruiken

Webmotion | De timeline van webmotion Tom Harms | DEVBABBL

Webmotion Timeline

Gifs

Adobe Flash

Svg drawings

3D animaties

Webmotion | Webanimatie voorbeelden Tom Harms | DEVBABBL

Webanimatie voorbeelden

Formulieren

Naam

E-mail

Hobbies

Sjoelen

Breien

Bridge

Voornaam

Mens

Buitenaards

Buttons

Meer informatie

Menus

Inview Animaties

Page Transitions

Webmotion | Webanimatie voorbeelden Tom Harms | DEVBABBL

Easing functions

                                    
                                        transition: opacity .5s linear;

                                    
                                        transition: transform .5s ease-in;

                                    
                                        transition: transform .5s ease-in-out;

                                    
                                        transition: 
                                            transform .5s 
                                            ease-in-out;

                                    
                                        transition: 
                                            transform .5s 
                                            cubic-bezier(0.65, 0, 0.35, 1); //easeInOutCubic

                                    
                                        transition: 
                                            transform .5s 
                                            cubic-bezier(0.83, 0, 0.17, 1); //easeInOutQuint

Welke animatie technieken zijn er? | Spring animations Tom Harms

Spring animations

                                    
                                    import { animate, spring } from "motion";

                                    animate(
                                        square, { 
                                            transform: [
                                                "rotate(0)", "rotate(135deg)", "rotate(0)"
                                            ],
                                        },
                                        { easing: spring ({
                                            stiffness: 30,
                                        })}
                                    )

                                    
                                    import { animate, spring } from "motion";

                                    animate(
                                        square, { 
                                            transform: [
                                                "rotate(0)", "rotate(135deg)", "rotate(0)"
                                            ],
                                        },
                                        { easing: spring ({
                                            stiffness: 30,
                                            damping: 15,
                                        })}
                                    )

                                    
                                    import { animate, spring } from "motion";

                                    animate(
                                        square, { 
                                            transform: [
                                                "rotate(0)", "rotate(135deg)", "rotate(0)"
                                            ],
                                        },
                                        { easing: spring ({
                                            stiffness: 30,
                                            damping: 15,
                                            mass: 4
                                        })}
                                    )

Webmotion | Animatie libraries Tom Harms | DEVBABBL