At Zajno, we’re captivated with taking daring concepts and turning them into absolutely 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 shortly developed into a totally interactive web site.
On this article, we stroll you thru the design and improvement course of, share the challenges we confronted, and clarify how we used Webflow to convey the concept to life. We’ll additionally discover the distinctive animation rules that made this mission stand out.
Web site Concept and Design Choices
We’ve been intently following the meals tech business and its rising tendencies for fairly a while, and the marketplace for compact farms offered an inspiring answer to the rising meals disaster. These farms are unbiased of climate circumstances, require minimal area, and are comparatively simple to function.
Impressed by this idea, we started exploring the way it might be scaled to an industrial stage. That is how the concept for the Inexperienced Stack web site got here to life—a fictional firm producing vertical bins with a modular design. These bins could 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 seem 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 Ideas at Work
Wanting again on the accomplished idea and evaluating its scale, the event group prompt bringing the whole lot to life utilizing the Webflow platform. It was important to protect the mission’s simplicity and magnificence. To realize this, we centered on three key animation methods 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 fashion.
Second—directional animation. Vertical motion grew to become the core animation precept. We utilized this constantly 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 offered 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 rules, we had been in a position to create a balanced, expressive, and cohesive mission.
Precept One: Blur because the Core Visible Type
Blur shouldn’t be solely current within the animations but additionally featured prominently within the very first part of the web site, the place customers see condensation forming on the glass of plant bins within the video. Whereas implementing the design idea, we realized that the appliance type appeared too simplistic. This prompted us to discover the concept of including a condensation impact there as properly.
To realize this, we determined to make use of WebGL and started looking for current options. Nevertheless, we shortly discovered that the majority implementations centered on rain results, which didn’t fairly match our wants. Finally, 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 intently with our imaginative and prescient.
Our developer and artwork lead experimented with the settings primarily based on this answer, fine-tuning them to get as shut as potential to the unique concept. And ultimately, we made it work.
On this method, totally different segments of the location grew to become interconnected by way of the blur and a smooth 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 rules: vertical movement and opacity-free transitions, which make it extra refined and dynamic. Regardless of its obvious simplicity, this impact required a considerate strategy because of a number of hover-related challenges.
Key Challenges
- Hover Occasion Loss: Gaps between menu objects may trigger the cursor to lose focus, interrupting the animation.
- Cursor Shifting Outdoors the Factor: The animation wanted to stay easy even when the cursor moved shortly away.
- Abrupt Transitions Between Menu Gadgets: Speedy cursor actions may 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 easy and steady transition, stopping sudden jumps between photographs.
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 carried out a present variable that tracks the at present lively picture. This allowed us to regulate the animation and stop it from restarting earlier than the earlier transition was absolutely accomplished. Consequently, even when the cursor moved quickly throughout the menu, the animation remained easy and secure.
const onMouseEnter = (e) => {
const place = hyperlinks.indexOf(e.goal);
if (place === present) return;
const currentImage = photographs[current];
const nextImage = photographs[position];
present = place;
};To stop animation overlap and conflicts, we used the gsap.killTweensOf() technique. 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 = photographs[current];
const firstImage = photographs[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 easy and responsive animations, eliminating any points that would disrupt the consumer expertise. By leveraging clip-path and thoroughly managing animations, we created a menu that isn’t solely visually interesting but additionally 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 making certain a seamless expertise at each stage of interplay.
Precept Three: Working with Variable Fonts
As talked about earlier, experimenting with variable fonts was one in every of our key challenges. This system isn’t used, however we consider it creates a robust impression on customers.
From a improvement 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 emblem, we merely chosen the brand, switched the selector state to hover, adjusted the variations to the specified values, after which returned the selector to its default state.
Conclusions
The most important 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 concept into a totally purposeful web site allowed us to find some really attention-grabbing options. A mission like it is a nice alternative to experiment with methods 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 rules early on (in our case, the three animation rules). These rules information decision-making, serving to to find out which results will improve the expertise and which could battle with the unique design idea. The outcome? A cohesive and constant mission.
