



















01
Learning Reflections
What is my biggest strenght?
My biggest strength is that i’m quick to adapt and learn new things. The web development sector is evolving faster than ever so it’s something you have to learn to work with.
What do i need to become better at?
When starting a project I try to plan out the whole thing and know exactly how everything will work. This leads to me not actually starting anything and overengineering a lot of straightforward projects. So I need to become better at starting something without being 100% prepared.
What is my biggest weakness?
I have a hard time trusting other people with work. This is because I think my way of doing things is the better approach. I’ve tried to be more aware of this and it has made me realise that more opinions is a good thing and it tends to deliver projects with less errors or design flaws.
What specific skills are needed to do that?
I think patience is something really valuable needed to fix this problem. Also just being confident when doing things will help to eliminate any doubt.
In this week, what skills would I like to have achieved?
By the end of the week I want to learn a clean and efficient way to implement advanced animations to modern websites. The tools I’d use to achieve this are The greensock animation platform (GSAP) and maybe Spline a 3d modeling tool for the web.
I’m hoping to find a universal implementation which i can use with most (hopefully all) modern web dev tools.
02
Learning Goals
By the end of the week I want to get more comfortable using the GSAP syntax. Learn the best practices to write good tweens and timelines. I want to implement these animations into an Astro website. I choose this framework because it’s lightweight and super intuitive to work with. Below is a list of points (smaller learning goals) that i want to work through this week.
Optimize writing tweens & timelines
Implement the ScrollTrigger plugin
Use the SplitType library to create advanced text animations
Build an animated preloader component
Page transitions
Flyout menus
Custom cursor
Creating responsive animations
Preformance first animations
Hover animations
SVG animations
Reusable and intuitive Astro components
03
Project Plan
Monday - best start ever
When I arrived home after the briefing I tried with an emphasis on tried making some soup. It went about as bad as it could. I cut my finger open whilst washing a freshly sharpened knife and then went on a 5 hour adventure to get to the emergency room where i got fixed up. So yeah mondays...
Accomplish nothing...
Tuesday - comeback time
After getting some well earned rest I got started researching the world of web animations. I worked together with Margo for some extra motivation and learned a lot about lots of different topics. I made a storyboard for the main animation of the website in Figma to help me visualize it and figure out the best way to implement it.
Research GSAP and best practices for animating the web
Brainstorm for some inspiration
Visualize the main animation by sketching and using Figma
Design the overall look & feel of the digital product
Wednesday - Expert meeting
After a couple days Ida let me know she’d organized a meeting for me with an expert on the topic of web animations. Most of the day was spent @KEA trying to implement the stuff i learned from the expert meeting.
Meet the expert
Write down important learnings
Setup the project structure for the digital project
Start implementing some of the easy UI components
Create the preloader animation
Thursday - Chill day
Thursday was a laid back day where I brushed up some UI components and finished the main animations for the website.
Continue working on the UI
Implement the main animation
Friday - Documenting day
After learning so many things I wanted to gather it all in one place. I wrote everything out and made a design to present all of it in a nice way on the website.
Bundle all learnings together
Make a design to present the content in a nice way on the digital product
Check for spelling errors and polish things in general
The weekend - SHIP IT!
In the weekend I made sure that I included everything that was needed for the hand in. I added all of the content to the website and applied the animations. Brushed up some more things within the codebase. Finally i deployed the website using github pages for everyone to view.
Gather all things nessecary for the hand in
Add the content of the deep dive to the website.
Apply the remaining animations
Clean up the codebase
Deploy the website using Github pages