Olivia's
This is an experimental site I built for a fictional cupcake company. Features include a loading screen animated in Javascript and Illustrator.
LOADING SCREEN
The loading screen was designed in Illustrator and exported as four SVG layers. The layers were then animated in Javascript using the GSAP plugins TweenMax and TimelineMax.
To get the loading screen to function, I first hid the site’s content. In the JavaScript, I told the “loader” (animated cupcake files) to fade out after 5.5 seconds. By that time, the animation is completed and the site’s “content” fades in.
PROCESS
The goal was to create a full page scrolling site without page breaks. To achieve this, I used Javascript to fade the sections in like a slideshow. This creates the illusion of multiple pages, when really we never left the homepage.
The logo animates on mouseover. Each letter is a list item, rotated 360 degrees in CSS. The list items are wrapped in an anchor that links to the home page.
The scroll indicator is pure CSS, animated along the Y axis.
The front page establishes the site’s color scheme. Each section of the site is modeled after these five cupcakes.
The sprinkles background is set as a fixed image.
For the word rotator, a Javascript function was used to hide one word and reveal another. The function is then triggered again (with the same delay) to create the loop. The animation was done using the Animate.css library.
Each box is a div arranged in a grid and rotated 45 degrees. @keyframes was applied to give it the pulse effect. The ‘nth-child’ selector was used to influence the pulse timing of the ‘even’ and ‘odd’ boxes.
The popout window, or modal, was primarily done in Javascript. An event ‘click’ listener was set to trigger the modal CSS class with a Z-index of 1 and a black background with a low opacity.
The ‘X’ button was set to close once clicked. I also set a ‘window.addEventListener’ so that the modal will close once clicking outside the box.
@keyframes was used again to ease the appearance of the box once it is opened, making it fade into view.
The video’s Z-index was set to 1. The orange overlay was set to 2, creating the mask.
The “Our Work” page keeps with the idea of borrowing the colors from the cupcakes on the first page.
The animation was done using the AOS library. An effect was individually applied to the header, paragraph, and image.
Instead of the Olivia’s logo taking us to the top of the page, it takes us to a replica of the main index with the loading screen disabled.