Design in Motion: The Animation Principles Behind Green Stack

At Zajno, we are passionate about taking bold ideas and turning them into fully functional, visually striking websites. One such project was the creation of Green Stack, a fictional company dedicated to compact farming solutions. What started as a simple concept for social media quickly evolved into a fully interactive website.

In this article, we walk you through the design and development process, share the challenges we faced, and explain how we used Webflow to bring the idea to life. We’ll also explore the unique animation principles that made this project stand out.

Website Idea and Design Decisions

We’ve been closely following the food tech industry and its emerging trends for quite some time, and the market for compact farms presented an inspiring solution to the growing food crisis. These farms are independent of weather conditions, require minimal space, and are relatively easy to operate.

Inspired by this concept, we began exploring how it could be scaled to an industrial level. This is how the idea for the Green Stack website came to life—a fictional company producing vertical boxes with a modular design. These boxes can be easily stacked and customized to meet individual needs.

The concept itself naturally dictated the website’s structure. The hero section was designed to visualize what a finished modular farm might look like. The following sections were intended to introduce the company, showcase the box’s functionality, and highlight its key advantages.

From Concept to Code: Animation Principles at Work

Looking back at the completed concept and evaluating its scale, the development team suggested bringing everything to life using the Webflow platform. It was essential to preserve the project’s simplicity and elegance. To achieve this, we focused on three key animation techniques that seamlessly integrated into the project’s structure.

First—avoiding opacity-based animations. We decided that the standard fade-in effect with opacity adjustments didn’t align with the project’s aesthetic. Instead, we used a blur effect combined with overflow: hidden, which added smoothness, depth, and refinement to the visual style.

Second—directional animation. Vertical movement became the core animation principle. We applied this consistently across the preloader, element appearances, menu hovers, and section intro animations. This approach gave the project both coherence and expressiveness.

Third—variable fonts in motion. We had long wanted to integrate variable fonts into a project, and this one presented the perfect opportunity. This stylish, tech-forward approach transformed typography from just a design element into an integral part of the overall animation concept.

By combining these three principles, we were able to create a balanced, expressive, and cohesive project.

Principle One: Blur as the Core Visual Style

Blur is not only present in the animations but also featured prominently in the very first section of the website, where users see condensation forming on the glass of plant boxes in the video. While implementing the design concept, we realized that the application form appeared too simplistic. This prompted us to explore the idea of adding a condensation effect there as well.

To achieve this, we decided to use WebGL and began searching for existing solutions. However, we quickly found that most implementations focused on rain effects, which didn’t quite fit our needs. Eventually, we discovered a Codrops shot showcasing three variations of rain effects. This led us to a GitHub repository from another developer, which aligned much more closely with our vision.

Our developer and art lead experimented with the settings based on this solution, fine-tuning them to get as close as possible to the original idea. And in the end, we made it work.

In this way, different segments of the site became interconnected through the blur and a soft fogged-glass effect, creating a visually pleasing, hazy aesthetic.

Principle Two: Implementing Image Transitions in the Menu

The image transition animation in the menu, designed as a flipping effect, supports two of our three key animation principles: vertical motion and opacity-free transitions, which make it more refined and dynamic. Despite its apparent simplicity, this effect required a thoughtful approach due to several hover-related challenges.

Key Challenges

• Hover Event Loss: Gaps between menu items could cause the cursor to lose focus, interrupting the animation.
• Cursor Moving Outside the Element: The animation needed to remain smooth even when the cursor moved quickly away.
• Abrupt Transitions Between Menu Items: Rapid cursor movements could cause chaotic animations, which we aimed to avoid.

Our Solution

To implement the effect, we used clip-path. When an image appears, the animation moves from top to bottom, and when it disappears, it follows the same top-to-bottom motion. This approach ensured a smooth and continuous transition, preventing sudden jumps between images.

const showImage = (image) => {
    gsap.fromTo(
        image,
        { clipPath: "inset(0 0 100% 0)" },
        { duration: 0.8, ease: "power2.out", clipPath: "inset(0 0 0% 0)" }
    );
};

const hideImage = (image) => {
    gsap.fromTo(
        image,
        { clipPath: "inset(0% 0 0 0)" },
        { duration: 0.8, ease: "power2.out", clipPath: "inset(100% 0 0 0)" }
    );
};

To manage the active image, we implemented a current variable that tracks the currently active image. This allowed us to control the animation and prevent it from restarting before the previous transition was fully completed. As a result, even when the cursor moved rapidly across the menu, the animation remained smooth and stable.

const onMouseEnter = (e) => {
    const position = links.indexOf(e.target);
    if (position === current) return;

    const currentImage = images[current];
    const nextImage = images[position];
    current = position;
};

To prevent animation overlap and conflicts, we used the gsap.killTweensOf() method. This ensures that all active animations are completed before a new one starts, maintaining clean and consistent transitions throughout the animation process.

gsap.killTweensOf([currentImage, nextImage]);
showImage(nextImage);
hideImage(currentImage);

To smoothly return the image to its initial position when the cursor leaves, we added a mouseleave event handler. This ensured that when the cursor exited the menu area, the image transitioned back to its default state without abrupt stops or jerky movements.

const onMouseLeave = () => {
    if (current === 0) return;

    const currentImage = images[current];
    const firstImage = images[0];
    current = 0;

    gsap.killTweensOf([currentImage, firstImage]);
    showImage(firstImage);
    hideImage(currentImage);
};

if (currentBreakpoint === "desktop") {
    links.forEach((link) => link.addEventListener("mouseenter", onMouseEnter));
    linksWrap.addEventListener("mouseleave", onMouseLeave);
}

The Final Result

Our solution successfully achieved smooth and responsive animations, eliminating any issues that could disrupt the user experience. By leveraging clip-path and carefully managing animations, we created a menu that is not only visually appealing but also functionally stable.

The image transitions are now fluid and well-controlled, while the animations have gained dynamism and interactivity without restricting the user. This resulted in a menu that feels alive and natural, enhancing the interface without unnecessary effects and ensuring a seamless experience at every stage of interaction.

Principle Three: Working with Variable Fonts

As mentioned earlier, experimenting with variable fonts was one of our key challenges. This technique is rarely used, but we believe it creates a strong impression on users.

From a development perspective, implementing this in Webflow was an exciting challenge. Webflow offers excellent built-in interactions that made the process much smoother.

To animate our logo, we simply selected the logo, switched the selector state to hover, adjusted the variations to the desired values, and then returned the selector to its default state.

Conclusions

The biggest takeaway from our work on Green Stack is this: if you love a concept, don’t stop at just a Dribbble shot. Turning an idea into a fully functional website allowed us to discover some truly interesting solutions. A project like this is a great opportunity to experiment with techniques that might not fit within client work.

Our second conclusion is more of a tip for beginner developers: when planning a project, it’s crucial to define key principles early on (in our case, the three animation principles). These principles guide decision-making, helping to determine which effects will enhance the experience and which might conflict with the original design concept. The result? A cohesive and consistent project.