🎨 Variable Fonts Animation Project
This project was originally developed in 2022 as part of my CAS studies at the Zurich University of the Arts (ZHdK). The initial goal was to experiment with variable fonts and typographic animations.
What began as an academic exercise later evolved into a website for my father’s printing business. Although the live website has since been redesigned, I decided to preserve the original design and source code in this repository as a reference and showcase of the concept.
👉 View the deployed project: https://jdupre81.github.io/var-fonts/
✨ Features
-
🎞️ Dynamic Typography – Smooth animations created using variable font axes
-
📱 Responsive Design – Optimized for both desktop and mobile devices
-
🧩 Clean Layout – Minimalist interface focusing on type and motion
-
⚡ Custom Animations – Built with GSAP for precise timing and fluid transitions
-
🪶 Lightweight Implementation – Pure HTML, CSS, and JavaScript (no frameworks)
🛠️ Technologies Used
-
HTML5 & CSS3 – Structure and styling
-
JavaScript (ES6) – Animation logic and interactivity
-
Variable Fonts – Typographic flexibility and motion
-
GSAP (GreenSock Animation Platform) – Smooth, performant animations
-
GitHub Pages – Hosting and deployment
⚙️ Installation & Usage
To view or modify the project locally:
1. Clone the repository
git clone https://github.com/jdupre81/var-fonts.git
2. Navigate into the project folder
cd var-fonts
3. Open the project
-
Open index.html directly in your web browser.
-
No build tools or dependencies are required.
📄 License
This project is released under the MIT License. You’re free to use, modify, and share it with proper attribution.