ScrollTrigger GSAP for animations

• 

I thought incorporating this library from GSAP would be relatively simple, but there were so many new things which I wasn't familiar with, and it took really long for me to get it to work, even after looking for YouTube tutorials, asking ChatGPT, or looking for documentations. I feel like I wasted so much time being hyperfixated on this. Since my time and skills are limited, I turned to good ol' HTML, CSS, and vanilla Javascript. (How could I forget my roots, and become so ambitious!) Remember: Simplicity has so much humanity.

Not sure if it's confirmation bias, but after attempting using GSAP ScrollTrigger, I started to view a lot of these modern websites differently, identifying website designs that uses GSAP libraries and it just made me wonder if it's really necessary for these animations.

Anyways, with that attempt out of the way, it could only mean one thing, getting another quick sketch done.

• 

Version three (which I only added on later) finally felt like the truest, rawest version of how I envision my website to be. Flowy, organic-like visuals, feeling like you stepped into a serendipitous garden. 🌳🌿 I plan for each of the experiments to be first, randomly spawned on the page, and second, have a slight ease in out movement.

• 

This was done through javascript, creating a function to show text, images, and links. I incorporated math.random() code for it to be at random positions within the container. I thought that it would look really sparse and empty and unlike of a garden if I just left 3 elements on screen, so I created another function that would spawn at random places.

• 

Visualising Elements

I was afraid that the concept of gardens as web space might come off as really cheesy, so I thought of incorporating more computational aesthetics to symbolise creatures of the garden, which reminded me a lot of what we did in first year of Computation in Design module, where we plot out different points and slowly made like, abstract visuals, which we then try animating it.

Moodboarding

• 

These were some images I picked out, looking for shapes and lines which helps me visualise the feeling and abstractness of these green garden creatures. I particularly really like the bottom 3 images, which focused a lot more on the curves rather than sharp, pointy edges.

p5.js time

I used this coding tutorial from the Coding Train to create a blob-like shape, with edges that can be adjusted. I think this is the perfect example because it's simple, and allow for some randomity with the edges wobbly.

• 

This was the part of this entire process which I felt, really, really happy, and proud of. The code uses vertex(x,y); to call out the shape, and from my year 1 coding struggles, I briefly recalled vertex being really sharp, but cureVertex, curves things! Are the coding geeks constantly riding the high of their coding triumphs??? This made me so happy lol

• 

Next Roadblock

After getting the visuals up and running, I wanted to incorporate them from p5js to VS Code, so that the animation will still continue moving, but alas, I do not know how to make it work, even with the help of ChatGPT. We move on.

More planning

• 

I struggled with chosing the colours and maintaining the cohesiveness of all the elements. I felt really frustrated being unable to get the colours I wanted so it was time to take a step back and look around for inspiration.

• 

• 

From the rapid editing process, I was able to start coding without frustrating over the smallest details.

• 

• 
• 

Incorporating typewriter effect

• 

Final main page

•