Deep dive into oceanic javascript animations with a greensock

Slide del talk di Alessandro Rigobello

Transcript

1. Deep dive into oceanic javascript animations with a greensock Deep dive into oceanic javascript animations with a greensock
2. Alessandro Rigobello !!! Co-founder @sixsocksstudio sixsocksstudio.com ! Awwwards developer jury member awwwards.com ! Co-founder THESIGNOF Deep dive into oceanic javascript animations with a greensock
3. Perchè fare animazioni? Deep dive into oceanic javascript animations with a greensock
4. • L'animazione è potente per trasmettere significato • Può guidare gli utenti • Se costruita correttamente, l'animazione può essere utile e performante • Perché altrimenti non stiamo usando il web al suo pieno potenziale • MORE FUN! Deep dive into oceanic javascript animations with a greensock
5. Why Javascript? (Or why not CSS) Deep dive into oceanic javascript animations with a greensock
6. Myth CSS: "Hardware accelerated" e "Mobile-friendly" JS: "Dirty" e "oldy" Fact CSS: "Hardware accelerated" e "Mobile-friendly" JS: Performante, versatile, event-based... Deep dive into oceanic javascript animations with a greensock
7. Controllo indipendente dei vari transform Codepen Deep dive into oceanic javascript animations with a greensock
8. Performance Hardware Acceleration? Coinvolgimento GPU translate3d() matrix3d() opacity Render Hell by Simon Schreibt Deep dive into oceanic javascript animations with a greensock
9. Controlli runtime ed eventi Curve di bezier Fisica - es. snap-back basati sul momentum (m*v) snap-back Workflow complessi Deep dive into oceanic javascript animations with a greensock
10. Convinto. Voglio animare con il Javascript, e ora? Deep dive into oceanic javascript animations with a greensock
11. Greensock animation platform! Deep dive into oceanic javascript animations with a greensock
12. Principali librerie • GSAP • Design Canada • Antoni • Anime.js • Submit Button • Fireworks canvas • MOJS • Dusty Burst • Love or Hate? Deep dive into oceanic javascript animations with a greensock
13. Tweening to tween, /twiːn/ Il tweening è il processo per il quale, durante la realizzazione di un'animazione, vengono creati una serie di fotogrammi (definiti tweens) tra un fotogramma di partenza e uno di arrivo (definiti keyframe). Wikipedia Deep dive into oceanic javascript animations with a greensock
14. GSAP • Free eccetto plugin • Espandibile e modulare • Può animare qualsiasi cosa • Veloce, robusta, API molto vasta e compatibile • Logo e visual identity terribile Deep dive into oceanic javascript animations with a greensock
15. Espandibile e modulare • GSAP Object • Tween, Timeline • Plugins: Attr, DrawSVG, MorphSVG, Physics2D, Pixi, ScrollTo ... • Draggable • SplitText Deep dive into oceanic javascript animations with a greensock
16. Può animare qualsiasi cosa CSS, elementi DOM, colori, Canvas, oggetti e array... const obj = { score: 0 } const showScore = () { document.body.innerHTML = obj.score } const tween = gsap.to(obj, { score: 100, duration: 20, onUpdate: showScore }) Deep dive into oceanic javascript animations with a greensock
17. GSAP Object • Creare animazioni • Configurare impostazioni • Registrare plugins, eases e effetti • Controllo globale su tutte le animazioni Deep dive into oceanic javascript animations with a greensock
18. Tween Per creare un singolo tween METODI (più comuni) • gsap.to({ x: 500, duration: 1 }) -> Valore di destinazione • gsap.from({ x: 500, duration: 1 }) -> Valore di partenza • gsap.fromTo({ x: 0 }, { x: 500 }) -> Valore di partenza e destinazione • gsap.then() -> Ritorna Promise al posto di onComplete callback Deep dive into oceanic javascript animations with a greensock
19. Timeline Per creare una timeline, un contenitore di piu tween METODI (più comuni) • gsap.timeline() -> Creare una nuova Timeline • gsap.addLabel() -> Aggiungere una Label • gsap.add() -> Aggiunge un tween, una timeline, una callback • gsap.set() -> Tween di durata 0 con destinazione Deep dive into oceanic javascript animations with a greensock
20. PARAMETRI (più comuni) targets: Object | Array | String selector | DOM element, duration: Number (second based), fromVars: Object, toVars: Object, stagger: Number, onCompleteAll | onComplete: Function Deep dive into oceanic javascript animations with a greensock
21. TIMELINE EXAMPLE Codepen Example import gsap, { Expo } from 'gsap' const tl = gsap.timelinemax({ onCompleteAll: resolve }) tl .addLabel('start') .from('#numbers', { autoAlpha: 0, duration: 0.3 }, 'start') .to($el, { y: -100, autoAlpha: 0, duration: 1.2, ease: Expo.easeInOut, }, 'start') .add(() { ctx.destroyScrollbar(); }) .to('#numbers', { yPercent: 100, duration: 1 }) Deep dive into oceanic javascript animations with a greensock
22. .to() delay: Number - Delay in secondi prima che l'animazione parta. ease: Ease (or Function or String). repeat: Number - Numero di volte di ripetizione dell'animazione dopo la prima iterazione (-1 per infinito). yoyo: Boolean - Se true ogni ciclo di ripetizione alterna la direzione. paused: Boolean - Se true l'animazione viene interotta subito dopo la sua creazione. stagger: Number - In caso di più targets, imposta delay tra un tween e un altro onComplete: Function - Funzione che viene chiamata quando l'animazione è completata. Deep dive into oceanic javascript animations with a greensock
23. ANIMATION PRINCIPLES I dodici principi fondamentali dell'animazione della Disney sono stati introdotti dagli animatori Ollie Johnston e Frank Thomas nel loro libro del 1981, The Illusion of Life: Disney Animation. Johnston e Thomas a loro volta hanno basato il loro libro sul lavoro dei principali animatori Disney dagli anni '30 in poi, e il loro sforzo per produrre animazioni più realistiche. Lo scopo principale dei principi era quello di produrre un'illusione di personaggi che aderivano alle leggi fondamentali della fisica, ma si occupavano anche di questioni più astratte, come i tempi emotivi e l'attrattiva del personaggio. Tumblr Vimeo Video Deep dive into oceanic javascript animations with a greensock
24. EASING Ease Visualizer CustomEase CustomWiggle Deep dive into oceanic javascript animations with a greensock
25. COOL STUFF Deep dive into oceanic javascript animations with a greensock
26. Stagger a partire dall'ul timo elemento dal primo all'ultimo gsap.to('.box', { rotation: 360, duration: 0.8, stagger: 1.2, }); dall'ultimo al primo gsap.to('.box', { rotation: 360, duration: 0.8, stagger: -1.2 }); Deep dive into oceanic javascript animations with a greensock
27. DEFAUL T EASE gsap.defaults({ ease: 'power2.in', duration: 1 }) Stepped animations gsap.to($cursor, { ease: SteppedEase.config(1), opacity: 0 }); Codepen Example Deep dive into oceanic javascript animations with a greensock
28. STORE TWEENS/TIMELINES const tl = gsap.timeline({paused: true}); tl .to($manny, { autoAlpha: 1, duration: 0.4 }) .to($meche, { x: -3, duration: 0.6 }); e poi: tl.restart() Deep dive into oceanic javascript animations with a greensock
29. RIMUOVERE CSS INLINE DOPO IL TWEEN gsap.to($manny, { autoAlpha: 0, clearProps: 'all' }); gsap.to($meche, { y: 0, autoAlpha: 0, clearProps: 'y' }); Deep dive into oceanic javascript animations with a greensock
30. Splittext gsap.registerPlugin(SplitText) const split = new SplitText('#quote', {type: 'words, chars' }) gsap.to(split.chars, { , stagger: 0.01 }) per tornare ad un unico nodo DOM split.revert() Codepen Example Deep dive into oceanic javascript animations with a greensock
31. FUNCTION VALUES Codepen Example const tl = gsap.timeline({ paused: true }) tl.to(slides, { y: (index, target, targets) target.hasAttribute('data top') ? 100 : -100, stagger: 0.01 }) tl.restart() Deep dive into oceanic javascript animations with a greensock
32. Draggable gsap.registerPlugin(Draggable) Draggable.create('.box', { type: 'x,y', edgeResistance: 0.65, bounds: '#container', throwProps: true }) Deep dive into oceanic javascript animations with a greensock
33. ANIMATING 2D CANVAS WITH PIXI I Buongiorno Deep dive into oceanic javascript animations with a greensock
34. ANIMATING 2D CANVAS WITH PIXI addSprites(el, cont) { const sprite = PIXI.Sprite.fromImage(`/assets/images/${el.url}.png`) const tl = gsap.timeline({ paused: true }) sprite.setupDimensions = el.setup sprite.alpha = 0 sprite.parallaxFactor = el.factor / 10 sprite.enter = tl this.setupSprite(sprite) tl .set(sprite, { alpha: 1 }) .from(sprite.position, { y: window.innerHeight + sprite.height, ease: Power4.easeOut, }); cont.addChild(sprite); } I Buongiorno Deep dive into oceanic javascript animations with a greensock
35. MorphSVG Temperature May the morph be with you Deep dive into oceanic javascript animations with a greensock
36. Timeline workflow Deep dive into oceanic javascript animations with a greensock
37. import { gsap } from "gsap"; import { SplitText } from "gsap/SplitText"; gsap.registerPlugin(SplitText); import enterText from './timelines/glitch text'; export const enterTransitions = new Map(); export const leaveTransitions = new Map(); const getEnterTl = done gsap.timeline({ onComplete: done }); const getLeaveTl = done gsap.timeline({ onComplete: done }); export function getTransition(type, page) { const transition = type 'enter' ? enterTransitions : leaveTransitions; return transition.get(page); } enterTransitions.set('home', ctx new Promise((resolve) { const tl = getEnterTl(resolve); const split = new SplitText(ctx.$introText, { type: 'lines, words' }); const $titles = ctx.$el.querySelectorAll('[data text]'); tl .add(enterText($titles, 1)) .from('[data slide]', { autoAlpha: 0, height: 0, ease: Expo.easeInOut, duration: 1.2, stagger: 0.07, clearProps: 'all', }) .from('[data anim="top"]', { autoAlpha: 0, duration: 0.8, y: 20, }) .from(split.lines, { skewX -35, ease: Power2.easeOut, stagger: 0.05, duration: 0.8, autoAlpha: 0, }); })); Deep dive into oceanic javascript animations with a greensock
38. Deep dive into oceanic javascript animations with a greensock
39. Ok. Sono pronto, e ora? DIVERTITI Deep dive into oceanic javascript animations with a greensock
40. Thanks to all Deep dive into oceanic javascript animations with a greensock