E-commerce website with headless CMS and Snipcart payments

Training Project | Dato CMS, Gatsby, JS, React

See online
ecommerce website screens

GSAP fun

This online store is inspired by Awwwards websites, so it is characterized by lots of animations. Animations are created with GSAP and ScrollTrigger. For styling, I have used Styled Components, and page transitions are made with Gatsby Plugin Transition Link.

Product page

The product page shows photos, the price with the promotional price of the product, as well as the description and specification All these fields are managed by Dato CMS. Below is a section with similar products.

Menu animations

The website has an animated menu with a photo that changes when the user hovers over the link to a specific subpage. In addition to the store and product page, there are also about and contact subpages.