Web
Animations

A mix of animation projects made using different methods. These projects used keyframes, request animation frame, and various GSAP techniques for static and interactive animations. All animations were created with CSS and happen automatically when the page loads.

The main goal of the initial project was to create a 2x2 image navigation interface following certain guidelines. I utilized flexbox, pseudo-classes, and pseudo-elements to position and make interactive elements. To achieve this, I designed a simple and clean interface. I also added an interesting element by adjusting the timing of transitions to create a delayed text effect.

I've carefully created individual seeds for the watermelon and used the @keyframes slice animation to make it look like it's being sliced. I used the .seed1, .seed2, .seed3, .seed4, and .seed5 classes to make different seeds inside the watermelon, placing them precisely. I also used the .cut-1:before pseudo-element to create the inner part of the cut. It has specific dimensions and styling, including a border-bottom with rounded corners to simulate the appearance of a watermelon slice.

This SVG Animate uses SVG and CSS to make a moving graphic. Inside the svg element, there's a (rectangle) and a (path) with animations. The moves, changes size, and color in 6 seconds, while the has a dash animation creating a moving border. CSS styles set background color, position, and animation details using keyframes for both elements. Overall, it creates an interactive visual effect with a moving rectangle and a dashed border.

This code showcases a dynamic animation created through JavaScript and CSS. It includes a moving box element inside a container, along with "STOP" and "RESET" buttons. JavaScript functions control the animation behavior. The animation is triggered by a "PLAY" button that moves the box horizontally across the screen. Clicking the "STOP" button pauses the animation, and "RESET" resets the animation to its initial position. The code relies on requestAnimationFrame to smoothly move the box, allowing users to play, pause, and reset the animation as desired. Overall, this code demonstrates interactive animation control through JavaScript events, making it suitable for learning and experimentation.

I learned to use GSAP to create timelines for my animations. GSAP is a JavaScript library for building animations on the web. The GSAP library is used to set initial positions, create a text animation, and control the animation of the girl image. The "controller" section allows users to interact with the animation using the provided buttons. The GSAP timeline orchestrates a series of animations, introducing elements with smooth transitions. The combination of these elements results in an attractive, interactive webpage with a playful yet elegant design. It showcases the versatility of GSAP and provides users with control over the animation. View animation here.

Here I have incorporated the "SplitType" feature to animate individual characters in the title. The animation smoothly raises each character along the y-axis with a staggered effect. A brief delay (0.2 seconds) precedes the animation, which has a duration of 0.3 seconds for each character. This code illustrates how to combine external libraries like GSAP with HTML and CSS to create captivating text animations. It enhances the visual appeal of the webpage and adds an interactive touch, making it particularly useful for web developers aiming to engage and inform their audience effectively. Click here to view the animation.

It has been an enriching learning experience, and throughout my second term at BCIT, I've gained substantial knowledge in coding, leading to increased confidence in my abilities.