An Animated Poem, built with CSS drawings & animations

Talk given @ Codemotion Berlin on 13/november/2019.
Code: https://codepen.io/felipebernardes/pen/MWWvXyW

Transcript

2. An Animated Poem built with CSS drawings & animations Felipe Bernardes felipebernardes.com Codemotion Berlin '19
3. img img img Confidential | 3 $ whoami Felipe Bernardes • Lives in Sorocaba, Brazil • Local conf/meetup co-organizer • Remote Freelancer @ Toptal • Front End Dev @ BabyCenter • Awful drums player Hire the top 3% of freelance talent @felip_bernardes Hire the top 3% of freelance talent
4. 1. context 2. code 3. learnings @felip_bernardes
6. Why? @felip_bernardes
7. Why not? @felip_bernardes
8. Just kidding @felip_bernardes
11. How? @felip_bernardes
12. 4 steps @felip_bernardes
13. 1. have a surgery 2. get really bored while on recovery 3. ??? 4. animated poem
14. Just kidding @felip_bernardes
15. 2 steps @felip_bernardes
16. 1. Drawings 2. Animations @felip_bernardes
17. css drawing basics @felip_bernardes
18. css drawing basics @felip_bernardes
19. from basic shapes, we can draw anything! @felip_bernardes
20. bauhaus @felip_bernardes
21. heart example @felip_bernardes
22. let's see some code @felip_bernardes
23. 1. Drawings a. heart baloon b. me and amanda c. mini hearts d. stars e. ground @felip_bernardes
25. 1. 2. Animations a. me and amanda, flying b. me and amanda, blinking c. mini hearts, popping up d. stars, slowly appearing e. sky, rotating f. ground, moving out of view g. poem stanzas, showing up
26. full demo presentation @felip_bernardes
27. Made for/Thanks to Amanda Vilela @felip_bernardes
28. learnings @felip_bernardes
29. frameworks & tools @felip_bernardes
30. creativity as our tool @felip_bernardes
31. one thing from this talk @felip_bernardes
32. exercise your creativity @felip_bernardes
33. fork me @felip_bernardes
34. a few links @felip_bernardes
35. @felip_bernardes
36. Front End, Back End & Full Stack QA analyst DevOps AR/VR Sales Force Blockchain and others
37. register @ bit.ly/toptal-codemotion
38. For details, come talk to us @ Toptal Booth!
39. code @ bit.ly/felipe-code slides @ bit.ly/felipe-slides
40. felipebernardes.com felipe.bernardes@toptal.com Felipe Bernardes Front End Developer @felip_bernardes code @ bit.ly/felipe-code slides @ bit.ly/felipe-slides Vielen Dank! Come talk to us @ Toptal booth!