Amgi
Context
Delivering creatively animated one - pager in a timely fashion
With the approaching date of the PAX WEST conference in Seattle, the urgency of refreshing the current template website became more prominent than ever. Amgi Studios, well-established animation and game development studio, was ready to do this website overhaul just in time. our responsibility was to make this transition happen quickly but also to deliver a project that speaks to the reputation of creativity and fun that Amgi Studios reflects in its characters and work.
client:
location:
sector:
year:
timing:
AMGI Studios
Los Angeles, USA
Animation / Gaming
2024
1-2 months
CREATION PROCESS
CREATIVE CONCEPT
We started with initial concepts by sketching possible layouts to illustrate animated elements on the website. WIth a good synergy with the client we were able to utilize well-prepared assets creating a creative concept and continue to the design work.
creation process
Analyzing the work of an artist
In the absence of a brand book, we analyzed the provided assets, which turned out to be an inspiring process thanks to their top-notch quality. Exploring the vibrant world of creative characters was both fun and insightful. The renders and animated showreel perfectly supported the vision, helping shape a dynamic and unique style that truly reflects the distinct character of AMGI.
creation process
fresh design language
The design direction was centered around the circle as the primary motif of the website. Paired with a narrow font and flat icons, the overall style evokes seamless movement. Glows and gradients add depth, enhancing the visual dynamics and further amplifying the fluidity of the animations.
Creation process
Prototyping in figma
With only eight days to deliver the design, we had to animate the prototype in Figma instead of After Effects, as we typically would. it worked out perfectly. As the saying goes, there’s beauty in simplicity, and by streamlining our design process for this project, we were able to optimize efficiency without sacrificing quality. This approach made a tremendous difference in meeting the tight deadline.
amgi studios
amgi studios
amgi studios
creation process
creative motion animation
What truly brings this website together are its captivating animations. Visitors are easily drawn in by the subtle on-scroll effects, like parallax movements, playful text jiggles, and picture upscales. However, the real highlight is the cleverly placed explosion animation at the middle of the site.
Fun world
of AMGI
BEHIND THE SCENEs
Developing front - end
Coding brings its own set of challenges, especially on the front end. Many of these were solved through the smart use of GSAP Club plugins, an extension of the core GSAP toolkit. To achieve smooth, fluid scrolling, we implemented GSAP ScrollSmoother, while MorphSVG was used for more complex animations, ensuring a visually engaging experience.
Behind the scenes
“Boom animation”
In web development, animating a mask presents limited options, making the explosion transition particularly challenging. To overcome this, we converted the mask’s path into a 0-1 interval instead of using default absolute units. This approach allowed us to smoothly scale each value in the path, enabling us to resize and animate the mask effectively, ensuring it seamlessly covered the masked assets.
To create the animation, we carefully mapped the easing of the explosion to align perfectly with the trigger marking the switch between videos. The final timeline combines scroll scrubbing with precisely timed animations in a specific section of the website, turning this area into a standout feature—a little wonder of design and interaction.
BEHIND THE SCENEs
Polishing with magnific
We’ve leveraged the Magnific tool for fine-tuning and upscaling renders, ensuring exceptional detail and quality. With the rise of AI, the possibilities have expanded greatly, and we’re committed to becoming even more proficient in its use. By integrating ai tools like Magnific into our workflows, we’re constantly pushing for better results with an open-minded approach.
Behind the scenes
Utilizing rive
We had the opportunity of attending the conference in Seattle, receiving direct feedback from the source. Our satisfaction grew with every smile from the client’s team.
We’re both honored and happy to have supported AMGI’s brilliant work, and we look forward to continuing our collaboration in the near future!
value
a new home for lively characters
We had the opportunity of attending the conference in Seattle, receiving direct feedback from the source. Our satisfaction grew with every smile from the client’s team.
We’re both honored and happy to have supported AMGI’s brilliant work, and we look forward to continuing our collaboration in the near future!
