At Zajno, we’re enthusiastic about taking daring concepts and turning them into totally practical, visually hanging web sites. One such undertaking 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 improvement course of, share the challenges we confronted, and clarify how we used Webflow to deliver the thought to life. We’ll additionally discover the distinctive animation rules that made this undertaking stand out.
Web site Thought and Design Selections
We’ve been carefully following the meals tech trade and its rising developments 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 situations, require minimal area, and are comparatively straightforward to function.
Impressed by this idea, we started exploring the way it might be scaled to an industrial stage. That is how the thought 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 fulfill 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 supposed 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 workforce urged bringing every little thing to life utilizing the Webflow platform. It was important to protect the undertaking’s simplicity and class. To attain this, we targeted on three key animation methods that seamlessly built-in into the undertaking’s construction.
First—avoiding opacity-based animations. We determined that the usual fade-in impact with opacity changes didn’t align with the undertaking’s aesthetic. As an alternative, we used a blur impact mixed with overflow: hidden, which added smoothness, depth, and refinement to the visible model.
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 undertaking each coherence and expressiveness.
Third—variable fonts in movement. We had lengthy wished to combine variable fonts right into a undertaking, and this one offered the right alternative. This fashionable, 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 undertaking.
Precept One: Blur because the Core Visible Type
Blur is just not 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 bins within the video. Whereas implementing the design idea, we realized that the applying kind appeared too simplistic. This prompted us to discover the thought of including a condensation impact there as properly.
To attain this, we determined to make use of WebGL and started looking for current options. Nonetheless, we rapidly discovered that the majority implementations targeted 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 far more carefully 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 means, totally different segments of the positioning grew to become interconnected by way of 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 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 attributable to 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 Shifting Outdoors the Factor: The animation wanted to stay clean even when the cursor moved rapidly away.
- Abrupt Transitions Between Menu Objects: 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)" },
{ period: 0.8, ease: "power2.out", clipPath: "inset(0 0 0% 0)" }
);
};
const hideImage = (picture) => {
gsap.fromTo(
picture,
{ clipPath: "inset(0% 0 0 0)" },
{ period: 0.8, ease: "power2.out", clipPath: "inset(100% 0 0 0)" }
);
};To handle the energetic picture, we applied a present variable that tracks the at present energetic picture. This allowed us to regulate the animation and stop it from restarting earlier than the earlier transition was totally accomplished. Consequently, 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 forestall animation overlap and conflicts, we used the gsap.killTweensOf() methodology. This ensures that every one energetic 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 Last Consequence
Our answer efficiently achieved clean and responsive animations, eliminating any points that would disrupt the person expertise. By leveraging clip-path and punctiliously managing animations, we created a menu that isn’t solely visually interesting but in addition functionally secure.
The picture transitions at the moment are fluid and well-controlled, whereas the animations have gained dynamism and interactivity with out proscribing the person. 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 certainly one of our key challenges. This system is never used, however we consider it creates a powerful impression on customers.
From a improvement perspective, implementing this in Webflow was an thrilling problem. Webflow gives glorious built-in interactions that made the method a lot smoother.
To animate our brand, 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: when you love an idea, don’t cease at only a Dribbble shot. 🙂 Turning an concept into a totally practical web site allowed us to find some really attention-grabbing options. A undertaking like this can be a nice alternative to experiment with methods that may not match inside shopper work.
Our second conclusion is extra of a tip for newbie builders: when planning a undertaking, 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 consequence? A cohesive and constant undertaking.
