At Zajno, we’re obsessed with taking daring concepts and turning them into totally purposeful, visually hanging web sites. One such mission was the creation of Inexperienced Stack, a fictional firm devoted to compact farming options. What began as a easy idea for social media rapidly advanced into a totally interactive web site.
On this article, we stroll you thru the design and growth course of, share the challenges we confronted, and clarify how we used Webflow to convey the thought to life. We’ll additionally discover the distinctive animation ideas that made this mission stand out.
Web site Thought and Design Choices
We’ve been carefully following the meals tech business and its rising tendencies for fairly a while, and the marketplace for compact farms introduced an inspiring answer to the rising meals disaster. These farms are unbiased of climate situations, require minimal house, and are comparatively straightforward to function.
Impressed by this idea, we started exploring the way it could possibly be scaled to an industrial degree. That is how the thought for the Inexperienced Stack web site got here to life—a fictional firm producing vertical containers with a modular design. These containers may be simply stacked and customised to satisfy particular person wants.
The idea itself naturally dictated the web site’s construction. The hero part was designed to visualise what a completed modular farm would possibly appear like. The next sections had been meant to introduce the corporate, showcase the field’s performance, and spotlight its key benefits.
From Idea to Code: Animation Rules at Work
Wanting again on the accomplished idea and evaluating its scale, the event workforce instructed bringing all the pieces to life utilizing the Webflow platform. It was important to protect the mission’s simplicity and magnificence. To attain this, we centered on three key animation strategies that seamlessly built-in into the mission’s construction.
First—avoiding opacity-based animations. We determined that the usual fade-in impact with opacity changes didn’t align with the mission’s aesthetic. As a substitute, we used a blur impact mixed with overflow: hidden, which added smoothness, depth, and refinement to the visible type.
Second—directional animation. Vertical motion grew to become the core animation precept. We utilized this persistently throughout the preloader, ingredient appearances, menu hovers, and part intro animations. This strategy gave the mission each coherence and expressiveness.
Third—variable fonts in movement. We had lengthy needed to combine variable fonts right into a mission, and this one introduced the proper alternative. This trendy, tech-forward strategy remodeled typography from only a design ingredient into an integral a part of the general animation idea.
By combining these three ideas, we had been capable of create a balanced, expressive, and cohesive mission.
Precept One: Blur because the Core Visible Model
Blur will not be solely current within the animations but in addition featured prominently within the very first part of the web site, the place customers see condensation forming on the glass of plant containers within the video. Whereas implementing the design idea, we realized that the appliance kind appeared too simplistic. This prompted us to discover the thought of including a condensation impact there as nicely.
To attain this, we determined to make use of WebGL and started trying to find present options. Nonetheless, we rapidly discovered that almost all implementations centered on rain results, which didn’t fairly match our wants. Ultimately, we found a Codrops shot showcasing three variations of rain results. This led us to a GitHub repository from one other developer, which aligned rather more carefully with our imaginative and prescient.
Our developer and artwork lead experimented with the settings based mostly on this answer, fine-tuning them to get as shut as potential to the unique thought. And ultimately, we made it work.
On this manner, totally different segments of the location grew to become interconnected by the blur and a mushy fogged-glass impact, making a visually pleasing, hazy aesthetic.
Precept Two: Implementing Picture Transitions within the Menu
The picture transition animation within the menu, designed as a flipping impact, helps two of our three key animation ideas: vertical movement and opacity-free transitions, which make it extra refined and dynamic. Regardless of its obvious simplicity, this impact required a considerate strategy on account of a number of hover-related challenges.
Key Challenges
- Hover Occasion Loss: Gaps between menu gadgets might trigger the cursor to lose focus, interrupting the animation.
- Cursor Transferring Exterior the Ingredient: The animation wanted to stay clean even when the cursor moved rapidly away.
- Abrupt Transitions Between Menu Gadgets: Speedy cursor actions might trigger chaotic animations, which we aimed to keep away from.
Our Answer
To implement the impact, we used clip-path. When a picture seems, the animation strikes from prime to backside, and when it disappears, it follows the identical top-to-bottom movement. This strategy ensured a clean and steady transition, stopping sudden jumps between photos.
const showImage = (picture) => {
gsap.fromTo(
picture,
{ clipPath: "inset(0 0 100% 0)" },
{ length: 0.8, ease: "power2.out", clipPath: "inset(0 0 0% 0)" }
);
};
const hideImage = (picture) => {
gsap.fromTo(
picture,
{ clipPath: "inset(0% 0 0 0)" },
{ length: 0.8, ease: "power2.out", clipPath: "inset(100% 0 0 0)" }
);
};To handle the lively picture, we applied a present variable that tracks the presently lively picture. This allowed us to regulate the animation and forestall it from restarting earlier than the earlier transition was totally accomplished. In consequence, even when the cursor moved quickly throughout the menu, the animation remained clean and secure.
const onMouseEnter = (e) => {
const place = hyperlinks.indexOf(e.goal);
if (place === present) return;
const currentImage = photos[current];
const nextImage = photos[position];
present = place;
};To stop animation overlap and conflicts, we used the gsap.killTweensOf() methodology. This ensures that each one lively animations are accomplished earlier than a brand new one begins, sustaining clear and constant transitions all through the animation course of.
gsap.killTweensOf([currentImage, nextImage]);
showImage(nextImage);
hideImage(currentImage);To easily return the picture to its preliminary place when the cursor leaves, we added a mouseleave occasion handler. This ensured that when the cursor exited the menu space, the picture transitioned again to its default state with out abrupt stops or jerky actions.
const onMouseLeave = () => {
if (present === 0) return;
const currentImage = photos[current];
const firstImage = photos[0];
present = 0;
gsap.killTweensOf([currentImage, firstImage]);
showImage(firstImage);
hideImage(currentImage);
};
if (currentBreakpoint === "desktop") {
hyperlinks.forEach((hyperlink) => hyperlink.addEventListener("mouseenter", onMouseEnter));
linksWrap.addEventListener("mouseleave", onMouseLeave);
}The Ultimate End result
Our answer efficiently achieved clean and responsive animations, eliminating any points that might disrupt the consumer expertise. By leveraging clip-path and thoroughly managing animations, we created a menu that isn’t solely visually interesting but in addition functionally secure.
The picture transitions are actually fluid and well-controlled, whereas the animations have gained dynamism and interactivity with out proscribing the consumer. This resulted in a menu that feels alive and pure, enhancing the interface with out pointless results and guaranteeing a seamless expertise at each stage of interplay.
Precept Three: Working with Variable Fonts
As talked about earlier, experimenting with variable fonts was considered one of our key challenges. This method is never used, however we imagine it creates a powerful impression on customers.
From a growth perspective, implementing this in Webflow was an thrilling problem. Webflow gives wonderful built-in interactions that made the method a lot smoother.
To animate our brand, we merely chosen the emblem, switched the selector state to hover, adjusted the variations to the specified values, after which returned the selector to its default state.
Conclusions
The largest takeaway from our work on Inexperienced Stack is that this: if you happen to love an idea, don’t cease at only a Dribbble shot. 🙂 Turning an thought into a totally purposeful web site allowed us to find some actually fascinating options. A mission like it is a nice alternative to experiment with strategies which may not match inside shopper work.
Our second conclusion is extra of a tip for newbie builders: when planning a mission, it’s essential to outline key ideas early on (in our case, the three animation ideas). These ideas information decision-making, serving to to find out which results will improve the expertise and which could battle with the unique design idea. The end result? A cohesive and constant mission.
