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 SVG animations
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.
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.
We build fast & performant websites based on the latest technologies.
Here at Ikius, we want to make things simple for you. We offer a dedicated team of experts that can help you get a blazing-fast Jamstack site and a development partner ready to continue helping you throughout the rest of the implementation process.
Next.js development services
Next.js is quickly becoming the de-facto standard for building next-gen websites. At Ikius, we work with Next.js to help you create a highly optimized website with Next.js.
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.