For the launch of Yestalgia, Decathlon’s unique capsule assortment, our mission was to design and develop a devoted digital expertise celebrating the model’s reinterpretation of the Nineteen Nineties.
Constructed round a curated choice of archival items reimagined via a recent lens, the gathering embraces the optimistic spirit, daring colours, and playful aesthetics of the last decade whereas remaining unmistakably fashionable.
Design
The visible id, created in collaboration with Dalkhafine, combines vibrant illustrations, expressive typography, and nostalgic references to immerse guests in a world the place outside heritage meets popular culture.
Our problem was to translate this wealthy inventive route into a fascinating, high-performance internet expertise that would assist the product launch whereas preserving the persona and vitality of the marketing campaign.
A Product-First Editorial Method
The structure combines extremely editorial sequences the place imagery and merchandise take middle stage. Massive-scale visuals, beneficiant compositions and minimal interface components enable every bit to be found virtually immediately, making a searching expertise that feels nearer to flipping via a marketing campaign than navigating a conventional product catalogue.
Bringing the Marketing campaign into the Interface
To attach these product-focused moments with the broader marketing campaign id, we launched purely graphic sections the place typography, shapes and motion take over. These sequences act as visible interludes all through the expertise, shifting the rhythm and bringing the playful vitality of Yestalgia instantly into the interface.
Quite than treating the marketing campaign belongings as ornament, we used them as a part of the positioning’s visible language, creating a relentless dialogue between product, typography, illustration and interplay.
The Walkman
One of many expertise’s most distinctive components is the navigation itself.
Impressed by the gathering’s 90s references, the menu turns into a cassette participant, with every tape representing a distinct vacation spot throughout the web site. Choosing a cassette transforms a well-recognized navigation sample right into a playful interplay, turning one thing purely purposeful right into a small piece of storytelling.
It turned a strategy to make the nostalgic idea tangible with out compromising the simplicity of the expertise.
A 90’ Graphic Thread
Shapes and contours run all through the web site as a recurring graphic thread, connecting its completely different parts and sections.
Delicate micro-interactions carry these components to life: traces prolong, shapes shift and graphic particulars react as customers transfer via the expertise. Quite than counting on massive results, movement is embedded into the visible system itself, creating continuity between typography, imagery, illustration and interface.
Collectively, these particulars give the web site its rhythm and make the marketing campaign really feel alive past its static visible id.
Animation
Constructing on the artist’s illustrations, we created a collection of looping animations that carry the graphic universe to life. Used all through the expertise, these refined sequences add rhythm, depth and a way of steady motion to the web site.
Improvement
The true problem: a inventive web site the consumer can truly replace
Yestalgia is a WordPress web site on a totally customized theme, shipped in 7 languages. The animations are the seen half, however the tougher constraint was invisible: a closely art-directed web site nonetheless must be genuinely simple to replace.
So each part of the positioning is a Blockstudio block: a json schema and a twig template. The web page is assembled from these blocks, which implies the consumer can reorder, recompose and swap content material with out touching code and with out breaking the artwork route.
On the front-end, the entire web site runs on piecesjs, a tiny framework constructed on native internet parts, providing a set of instruments and utilities tailor-made for inventive web sites, the place every Piece is an autonomous ingredient that lazy-imports solely its personal JS and CSS. On prime of it we feature a library of utilities from undertaking to undertaking, and the one which issues most right here is our Scroll Piece. It plugs Lenis into GSAP ScrollTrigger and centralises all the pieces scroll-related behind information attributes, so interactivity is wired straight within the markup.
The menu: a walkman you’ll be able to load 📼
This was the most important problem of the undertaking and the half I loved most. A Walkman rises into body, the cassettes slide out, and whenever you decide one you genuinely really feel it snap again into the deck earlier than the entire machine drops away to disclose your chosen part.
Getting that loop to really feel bodily got here out of a back-and-forth between improvement and movement design. I constructed a primary working model straight from the design, realizing the intent was for the cassettes to return out of the Walkman and slide again in on click on. Michal, the movement designer, then took that base and reworked it, pushing the easings, delays and durations a lot additional than I had, which is what makes it dwell as an actual object quite than a set of tweens. I ported these settings again into the code to fine-tune the interplay.
A small element on shut, the walkman dips and snaps again over two very quick tweens. That bounce is just like the “click on” of a cassette seating within the slot. Round that: hovering a menu merchandise swaps the background shade and its matching sundown layer and cell will get a haptic pulse.
Large title reveals
These are the big scroll-triggered headlines, and their signature element is a fake-3D extruded thickness. There isn’t a 3D wherever: every character (every phrase on cell) is doubled with a reproduction that rides barely behind it, faking an embossed depth on the kind because the letters slide into place.
The animation is pushed by two offsets. A stagger between every letter walks the reveal throughout the road, and a delay between a letter and its duplicate is what creates the depth. To maintain the impact energetic, the fade-in runs a lot quicker than the translate.
On cell we cut up by phrases as a substitute of characters to enhance performances. A reduced-motion can be set: each length, stagger and delay drops to zero, so the headline nonetheless assembles itself, it simply does it immediately.
Rive for the vector animations
Each Rive loop is gated by an intersection observer: animations begin once they enter the viewport and pause the second they depart, so we by no means burn GPU on movement no one can see.
The reduced-motion can be arrange right here. Quite than skipping the animation, we scrub it straight to its final body, the composition nonetheless reads precisely as designed, it simply doesn’t transfer.
Movement declared in markup
Two small primitives cowl many of the ornamental movement on the positioning, and neither of them wants new JavaScript to be reused.
The primary is a generic scroll-driven timeline element whose whole definition lives within the HTML: a from state, a to state, an non-compulsory easing and length, plus a variant for portrait screens. The markup may also declare, optionally, the place within the viewport the animation ought to begin taking part in and the place it ought to cease, so the identical element might be tuned per part with no line of latest code. The element parses these values, builds a GSAP timeline, and the Scroll Piece drives its progress because the ingredient crosses the viewport. Dozens of animations throughout the positioning are constructed this manner, declared solely within the markup.
The second is the satellite tv for pc, the small ornamental components that rotate endlessly. Every one picks a random beginning angle and route so no two are in sync, and the rotation runs on Tempus, a single shared animation loop for the entire web page, normalized towards delta time so the pace is equivalent at 60 or 120fps. Satellites subscribe once they enter the viewport and unsubscribe once they depart, so one which’s off display prices nothing in any respect.
The infinite draggable carousel
The fullscreen infinite carousel is constructed on GSAP’s seamless-loop approach: a grasp timeline choreographs every card’s place, scale and tilt. Each different card tilts the other means, which supplies a enjoyable rhythm. The carousel magnets onto the closest slide, and the newly lively card triggers its personal title reveal with a synchronization between slides and titles managed by piecesjs.
The footer lookbook
One other enjoyable problem on this undertaking. Just one picture is ever open at a time, and the part needed to hold precisely the identical whole peak all through, so searching the lookbook by no means makes the remainder of the web page leap beneath you.
The tough half was timing. Every picture has to begin opening on the proper second relative to its title, whereas the encompassing content material is already being pushed round by whichever picture opened above or under it. Getting that to really feel seamless got here all the way down to a number of small changes.
Tech stack
For the back-end: WordPress with a customized theme based mostly on Timber, Blockstudio for a visible block editor, Polylang for the 7 languages.
For the front-end:
- piecesjs to drive the front-end with native internet parts (the Codrops intro)
- Tailwind v4 and PostCSS
- GSAP for movement (with ScrollTrigger, Draggable and SplitText)
- Lenis for easy scroll
- Rive for the vector animations
- Tempus as the only shared animation loop
- web-haptics for cell suggestions
- Constructed with vite
