Gobelins Timeline
Gobelins Timeline is a project created for the early 2025 open days of Gobelins Paris. The goal was to design an original and interactive timeline showcasing the history of the school. (This project was co-created with Ahmed Kabbej, Dounia Bahzad, Yvan Telesinski and Inès Rahli)
-
Experience
This project provides a dynamic way to explore Gobelins' past. Using smooth animations and an engaging visual design, it brings key milestones of the school's history to life, making learning both interactive and enjoyable.
-
Focal length illusion
One challenging part of this project was creating a sense of depth using only CSS properties. To achieve this, we chose to simulate a camera’s behavior by mimicking a focal length. For this effect to work, each element in the scene needed a precise focus point relative to the 'camera.' Then, by calculating the element’s offset from its focus point, we applied a variable blur filter along with changes in opacity, making it appear and disappear smoothly. Check out the Github repo to learn more about how I built this effect.
-
Handcrafted shapes
For this project, we designed several custom shapes and gradients inspired by GSAP’s branding. We used Figma as our vector graphics editor, which made it easy to experiment with different shapes and colors until we found the best ones.
-
Technologies Used
The project was built using TypeScript for structured development, GSAP for fluid animations, SCSS for styling, and HTML for the page structure.
-
Try it now
Our project is available online ! You can try it right now by clicking here
Landing page of the website
Demonstration
SVG Shapes
