0

%
web animationscircle arrow symbol rightweb animationscircle arrow symbol rightweb animationscircle arrow symbol rightweb animations
ghost icongsapcircle cross iconsvgghost icongsapcircle cross iconsvgghost icon
easingcircle cross icontriggerscircle arrow symbol righteasingcircle cross icontriggerscircle arrow symbol righteasing
animation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frameanimation frame
The depths of our insights are often
determined by the thoroughness of
our explorations.

01

Learning Reflections

arrow icon

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

arrow icon

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.

  • arrow icon

    Optimize writing tweens & timelines

  • arrow icon

    Implement the ScrollTrigger plugin

  • arrow icon

    Use the SplitType library to create advanced text animations

  • arrow icon

    Build an animated preloader component

  • arrow icon

    Page transitions

  • arrow icon

    Flyout menus

  • arrow icon

    Custom cursor

  • arrow icon

    Creating responsive animations

  • arrow icon

    Preformance first animations

  • arrow icon

    Hover animations

  • arrow icon

    SVG animations

  • arrow icon

    Reusable and intuitive Astro components

03

Project Plan

arrow icon

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...

  • arrow icon

    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.

  • arrow icon

    Research GSAP and best practices for animating the web

  • arrow icon

    Brainstorm for some inspiration

  • arrow icon

    Visualize the main animation by sketching and using Figma

  • arrow icon

    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.

  • arrow icon

    Meet the expert

  • arrow icon

    Write down important learnings

  • arrow icon

    Setup the project structure for the digital project

  • arrow icon

    Start implementing some of the easy UI components

  • arrow icon

    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.

  • arrow icon

    Continue working on the UI

  • arrow icon

    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.

  • arrow icon

    Bundle all learnings together

  • arrow icon

    Make a design to present the content in a nice way on the digital product

  • arrow icon

    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.

  • arrow icon

    Gather all things nessecary for the hand in

  • arrow icon

    Add the content of the deep dive to the website.

  • arrow icon

    Apply the remaining animations

  • arrow icon

    Clean up the codebase

  • arrow icon

    Deploy the website using Github pages