This project is based off of a brief designed to experiment with different Javascript libraries, in particular animation types. The context of the website is a single page, vertical scroll product page for the Nvidia RTX 3080 graphics card.
The website is built with a combination of HTML, pure CSS and Javascript. The major animations were made using the Javascript library GSAP with the ScrollTrigger plugin. There is also a small implementation of the Shoelace CSS framework for a few minor features. In an attempt to make the animations stand out more I tried integrating the JS library Anime.js as well however found that GSAP had most of the features Anime.js had resulting in its discountinuousy.
Front-End Development & Design
Visual Studio Code
Front-End Dev
5 Weeks
Utilising GSAP’s ScrollTrigger plugin the RTX 3080 card is slowly revealed on scroll, providing an engaging point of user interaction. Once scrolled down buttons appear at certain areas of the card highlighting some of its selling points. Each button is linked to a Shoelace modal containing relevant information.
GSAP’s ScrollTrigger plugin is great at providing subtle animations that make these text heavy pages more appealing and interactive to the viewer.
To create the image carousel I implemented a JS library called Splide.js, this was the best method of displaying the in-game examples of the RTX card. The performance page is made up of several divs styled in the form of a bar graph, each growing bar is activated by GSAP’s ScrollTrigger plugin to grow to their respective sizes.
Continuing utilizing GSAP’s ScrollTrigger these two sections specify the RTX 3080’s internal specifications and give the user the option to purchase the graphics card.
