Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thounny/day_030
GSAP-Driven Animated Gallery
https://github.com/thounny/day_030
css gallery gsap html image-gallery javascript lain serialexperimentslain
Last synced: 5 days ago
JSON representation
GSAP-Driven Animated Gallery
- Host: GitHub
- URL: https://github.com/thounny/day_030
- Owner: thounny
- Created: 2024-10-30T15:18:28.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-10-30T15:29:36.000Z (about 2 months ago)
- Last Synced: 2024-12-20T13:26:38.672Z (5 days ago)
- Topics: css, gallery, gsap, html, image-gallery, javascript, lain, serialexperimentslain
- Language: HTML
- Homepage: https://thounny.github.io/DAY_030/
- Size: 36.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DAY_030 | GSAP-Driven Animated Gallery
## Project Overview
For **DAY_030**, the final day of my 30-day daily code challenge, I created an **animated gallery** using **HTML**, **CSS**, **JavaScript**, and **GSAP**. This project showcases a minimalist design with dynamic image animations, scattered layout transitions, and a soft color palette. The gallery is inspired by my love for the anime *Serial Experiments Lain*, blending subtle chaos with calm minimalism to reflect the enigmatic atmosphere of the show.
---
## Preview
## Inspiration
I was inspired by award-winning website designs from Awwwards and my love for *Serial Experiments Lain*. This anime's surreal and contemplative nature influenced my choice to create an experience where images scatter and subtly shift positions, adding an interactive layer that’s both playful and mysterious. Also we all love **lain**.
---
## Key Features
- **Minimalist Layout**: Soft background and unobtrusive navigation links for a clean aesthetic.
- **Dynamic Image Animations**: GSAP-powered animations that scatter and shrink images to specific positions, emulating the fragmented, introspective style of *Serial Experiments Lain*.
- **Smooth Transitions**: Animated text and images for a visually cohesive experience.
- **Brutalist Design Elements**: Bold yet minimal styling, emphasizing simplicity and functionality.
---
## JavaScript and Animation Details
### JavaScript Libraries Used
1. **GSAP (GreenSock Animation Platform)**:
- Manages the initial load animations, text transitions, and image scattering effects.
### Animation Implementation
The JavaScript code uses **GSAP** to handle loading animations and position effects for the gallery images. The smooth transitions deliver an immersive experience, aligning with the layered and fragmented themes inspired by *Serial Experiments Lain*.
#### Step-by-Step Code Explanation
1. **Setting Up Initial Positions**:
The images are first positioned in the center of the screen, with `scale(0)` to create an initial shrink effect.
```javascript
gsap.set(".img", {
top: "45%",
left: "50%",
transform: "translate(-50%, -50%) scale(0)",
});
```
2. **Loading Animation for Text**:
Each line of text in the header animates upwards into view, creating a subtle reveal effect.
```javascript
gsap.from("p", {
y: 40,
ease: "power4.inOut",
duration: 1,
stagger: {
amount: 0.15,
},
delay: 0.5,
});
```
3. **Expanding and Scattering the Images**:
After the initial text animation, each image in the gallery scales up to full size before scattering into specific positions across the screen.
```javascript
gsap.to(".img", {
scale: 1,
width: "300px",
height: "400px",
stagger: 0.15,
duration: 0.75,
ease: "power2.out",
delay: 1,
onComplete: scatterAndShrink,
});
function scatterAndShrink() {
gsap.to(".img", {
top: (i) => positions[i].top,
left: (i) => positions[i].left,
transform: "none",
width: "75px",
height: "100px",
stagger: 0.075,
duration: 0.75,
ease: "power2.out",
});
}
```
4. **Fade-Out of Header Text**:
After the images settle, the header text fades out smoothly, adding to the clean, minimalistic experience.
```javascript
gsap.to("p", {
top: "40px",
ease: "power4.inOut",
duration: 1,
stagger: {
amount: 0.15,
},
delay: 3,
onComplete: () => {
document.querySelector(".header").remove();
},
});
```
5. **Fade-In for Navigation Links**:
Finally, navigation links fade into view, providing smooth and unobtrusive access to external profiles.
```javascript
gsap.from("a", {
y: 20,
opacity: 0,
ease: "power2.out",
duration: 1,
stagger: {
amount: 0.15,
},
delay: 4,
});
```
### Layout Structure
The layout emphasizes a central text header and a scattered image gallery. Absolute positioning of images and the `gsap` animations achieve a visually balanced, interactive design.
---
## How to Run
1. **Clone the repository**:
```bash
git clone https://github.com/thounny/DAY_030.git
```
2. **Navigate to the project directory**:
```bash
cd DAY_030
```
3. **Open the `index.html` file** in your browser, or use a local development server like **Live Server** in VSCode.
---
## Project Structure
```bash
DAY_030/
│
├── assets/
├── fonts/
│ └── helveticaneue.woff2
├── images/
├── index.html
└── styles.css
```
---
## Technologies Used
- **HTML5**: Provides the foundational structure for the gallery layout.
- **CSS3**: Manages styling, absolute positioning, and aesthetic elements.
- **JavaScript (ES6)**: Controls animations and interaction.
- **GSAP (GreenSock Animation Platform)**: Powers the gallery animations and transitions.
---
## Author
**Thounny Keo**
Creative Developer & Designer
Frontend Development Student | Year Up United
---
