This project is a responsive product detail page inspired by the "The Roger" collection page from ON:
🔗 https://www.on.com/en-ch/collection/the-roger
My goal is to recreate the clean, professional look and feel of the original ON sneaker product layout, using HTML, Tailwind CSS, and JavaScript with GSAP animations.
The idea is to enhance the static design with interactive animations and page transitions inspired by a YouTube tutorial by CodeGrid:
🎬 https://youtu.be/CXpY4wHsSCk
- Responsive layout using Tailwind CSS
- Horizontally scrolling image carousel on desktop
- Stacked layout on mobile for performance and accessibility
- Clean product details (title, color, price, CTA)
- Related sneaker recommendations below product info
- Remote image linking (from ON’s site) to reduce local asset load
- Basic entry animations using GSAP
To improve performance and reduce project size, all product and recommendation images are linked directly from ON’s official website rather than downloaded and hosted locally.
- ✅ Faster page load with no image hosting setup
- ✅ Reduced project size for easier deployment
- ✅ Immediate access to high-resolution, optimized images
- ✅ Easier updates by simply replacing the URLs
This keeps the project lightweight and efficient, especially when deployed online.
- HTML5
- Tailwind CSS
- JavaScript (Vanilla)
- GSAP (GreenSock Animation Platform)
- Website: https://www.on.com/en-ch/collection/the-roger
- Clean, modern sneaker layout with product carousel and structured recommendations.
- Video: https://youtu.be/CXpY4wHsSCk
- Implements GSAP + Draggable for a smooth homepage interaction and transition between product pages.
I plan to use this draggable concept in a future homepage that allows users to horizontally drag through products and click to enter the individual product page (this one).
- GSAP-animated draggable homepage similar to the CodeGrid tutorial
- Smooth page transitions between homepage and product page
- Shopping cart drawer with animation
- Product image zoom or lightbox view
- Multi-product support using dynamic data (e.g., JSON or CMS)
- Accessibility enhancements (keyboard nav, ARIA roles)
- Basic product filtering on homepage (e.g., color, price)
To run the project locally:
- Clone the repo
git clone https://github.com/your-username/the-roger-clone.git
- Open index.html in your browser
That’s it! No build steps or installs needed unless you expand to a full app.
This is a learning and personal project. All trademarks and images are property of their respective owners.