It's not easy to animate multiple SVG files 1:1 to a carefully crafted design. However, we were able to achieve this by using a modern framework for animating SVG files: GSAP. This truly brings Headstart Dairy to the next-gen and makes the site accessible with all browsers and devices.
Interactive marketing website development with Next.js
See Headstart DairyLooking for something similar?Seamless
Interactive SVG animations
Easy
Content management
We used Dato CMS to create an easy content managing experience for non-technical editors, making the site effortless to manage and update.
Making it possible with React & Next.js
Creating an animated site with large SVG files where almost every SVG has its own individual would be nearly impossible to create with a Legacy framework such as WordPress. By using Jamstack and a modern framework for the front-end we can make the site work seamlessly on all devices.
The tech stack:
How it was built:
Animating multiple SVG's for desktop and mobile is challenging, but not impossible. We used GSAP and React to seamlessly animate the SVGs when users scroll through the site.
Next.js
Dato CMS
Vercel
Next.js
Next.js is one of the leading JavaScript frameworks and static site generators in the market.
Get in touch
Need help with Jamstack development?
Please leave us a message and we'll be in touch with you. We're happy to discuss your project in more detail in a one-to-one session.
Contact sales
sales@ikius.comWe build fast & performant websites based on the latest technologies.
Our work
See our work.
Case studies and articles about the work we do at Ikius. See how we've helped clients over the world build next-gen digital solutions.