MIMUW HCI2020 04
- 2. Animation 1. Data visualisation 2. Storytelling 3. Immersion / Interaction / Interest 4. Navigation
- 3. Animation / tools 1. CSS 2. JS 1. specialized frameworks 2. animation frameworks 3. game engines 3. SVG animation (SMIL) Mobile…
- 4. CSS PROS 1. simple to implement 2. (quite) fast 3. browser support CONS 1. DOM parent/child relation 2. simple 3. only simple choreographies 4. only basic timing functions
- 5. CSS 1. transition 2. animation easing functions…
- 6. CSS / issues 1. DOM parent/child relation – JS/CSS hybrid
- 7. break –> JS
- 8. JS PROS 1. everything is possible 2. can be very fast 3. can handle complex data CONS 1. harder to implement / maintain 2. third-party dependencies
- 10. JS / specialized frameworks 1. sliders 2. galleries / lightbox 3. scrolling 4. … (endless list)
- 11. JS / animation frameworks 1. ( jQuery ) 1. animate 2. plugins 2. GSAP – GreenSock Animation Platform 3. Three.js 4. D3.js 5. … (endless list) support libs 1. ScrollMagic canvas vs DOM
- 12. JS / game engines 1. Babylon.js
- 13. GSAP 1. tweens 2. timelines 3. plugins
- 14. Scroll Magic 1. sliders 2. galleries 3. scrolling 4. … (endless list)
- 15. Animation / wrap-up 1. navigation / micro-animations – CSS 2. immersion / interaction / interactive movies – GSAP 3. storytelling – GSAP / Scroll Magic 4. data visualisation – GSAP (timelines)
- 16. break –> lab
- 17. Lab task 1 – menu Prepare: 1. hamburger + menu 2. text Do: 1. hamburger hover animation 2. show/hide menu – show over text 3. show/hide menu – menu pushes text css + js events
- 18. Lab task 2 – Conan Prepare: 1. conan + monsters 2. maze + walls + openings 3. treasure Do: 1. animate monsters along paths 2. animate conan through maze (start on click) 3. make conan choose treasure gsap
- 19. Lab task 3 – covid article Prepare: 1. two sections: heading, image, long text with keywords Do: 1. animate headings (enter from right) 2. highlight keywords 3. pin and unpin images (so that it stay for the whole section) gsap + scrollmagic