格 千格 KiloCell

Visualisation Tool for the Scatter Function

Still upset about the hard-on-page animation? This tool is visualized by Cubic-Bezier Curves, help you to adjust high-end animations with a sense of physics, rhythm. Resolve UI Interacting mechanization hurts, so that every action reaches the heart.

✨VoicePreview
Duration: 1s
Export Code












📊 beat contrast (VS Linear/Ease)






Current Slow








Speed (Linear)








Standard (Ease)








Access (Ease-In-Out)

























How can we solve the problem of animating “hard machinery” on the web page?



            Do you find your animations always “false” when developing web pages or mobile applications? For example, the moment when the sidebar pops out is too abrupt, or the zooming feedback after the button clicks is a simple one. PPT Switch.
            The central reason is that you use linear animation.




            In the physical world, no object reaches its maximum speed from a static moment and stops at a second moment. Gravity, friction and inertia dictate that movement necessarily has acceleration. This tool is through
            Cubic-Bezier (three Bézier curves)
            Simulate these physical properties to address the following specific intersectional pain points:
          




🚨 Problem 1: Window pops out too hard, no visual buffer



Solutions:
              Use
              ease-out
              class curve. The animation begins very quickly, captures the attention of the user and stops slowly at the end, and it appears elegant. Select in our preset
              easeOutQuart
              or
              easeOutExpo
              , so that the window slides like a velvet pad.
            






🚨 Problem 2: Button click feedback "meat" not enough to enjoy



Solutions:
              Try
              Back (backfire)
              Effect. Add a small excess and bounce back at the end of the zoom or shift. This simulates the rebound of the physical button being pressed, and allows interaction to be filled with a "recognition."
            




In-depth understanding of the four core parameters of Cubic-Bezier



cubic-bezier(x1, y1, x2, y2)
            Two control points within a square of a unit are defined:
          


    

  • 
(x1, y1)
              : determines the slope at the start of the animation. The bigger y1, the faster it starts; y1 is negative and has a backward effect.
            
    • 

  • 
(x2, y2)
              : determines the state of the animation until its end. Y2 +1 has the effect of exceeding the endpoint and re-blasting.
            
    • 



A slow motion proposal (Beest Practices) in different settings


    

  1. 
Enter Page (Entrance)
              : recommended for use
              ease-out
              Variable. Users want to see content as soon as possible, so start quickly.
            
    2. 

  2. 
Page Off-Stamp (Exit)
              : recommended for use
              ease-in
              Variable. When the object leaves, the user has finished, and faster departure saves waiting time.
            
    3. 

  3. 
Smallball/Indicator Move (Moving)
              : recommended for use
              ease-in-out
              。 Simulates the complete acceleration and deceleration process of moving objects from point A to point B.
            
    4. 

  4. 
Playful UI
              : boldly use
              elastic
              (flex) or
              bounce
              (Backback) Add a dynamic character to the brand.
            
    5. 



Why this tool?


There are many Bézier tools on the market, but we know the developers better:


    

  • 
Code One Export
              : Supports the master mobile gallery GSAP, Anime.js, without manual conversion parameters.
            
    • 

  • 
Real-time racing.
              : Compare your custom curve directly with linear/ease, and see the optimisation at first glance.
            
    • 

  • 
Move End Fit
              : Can also debug animated curves on mobile phones.
            
    • 







• Common problems of developers (FAQ)






What is the maximum value of cubic-bezier in CSS?



              The X-axis (time axis) must be between 0 and 1. But the y-axis can go beyond this, for example, to 1.5. achieves over-reaction, or -0.5 achieves backward resilience. It's the secret to making animated animation.
            






Why is the GSAP code not the same as the CSS?



              GSAP has its own slow engine. For standard Bézier curves, we convert it to GSAP
              CustomEase
              Format to ensure 100% consistent visual effects in an animation of JS.
            






How can you keep animated at the end of the movement?



              Try to be just
              transform
              (place shift, zoom, rotate) and
              opacity
              Use slow animated animation. These properties are accelerated by GPU, do not trigger a reset, and can achieve 60fps with our slow curve. Full of frame experience.