Casual / Experiment Experiment

Anime-Style Loading Screen

CSS & GSAP Animation

01 — Project Overview

A stylized anime/manga loading screen using GSAP timelines and SVG ink-stroke animations.

Solo Developer.

Stack

GSAPHTML5CSS3JavaScript

Private / Offline

Goal

Explore anime-aesthetic web animation using GSAP SVG path drawing.

User Issue

Casual exploration of drawSVG and clip-path animation.

SVG Path Drawing

Used GSAP's drawSVG plugin to animate ink-stroke character outlines frame by frame.

Key Challenge

Creating the halftone dot pattern effect using pure CSS without canvas.

snippet

gsap.from('.stroke-path', { drawSVG: '0%', duration: 1.5, stagger: 0.2 });

A cinematic anime-style loading screen with ink-stroke SVG reveals and a GSAP-orchestrated sequence.

Impact

A creative showcase of GSAP's drawSVG and stagger capabilities in a non-standard visual context.

Learnings

Mastered GSAP's drawSVG plugin and SVG clip-path for cinematic reveals.

What I'd do differently

Would add procedurally generated halftone backgrounds using canvas.