In modern independent e-commerce websites, appropriate webpage animations can greatly enhance the website's "sophistication" and "technological feel," allowing the content to be presented in an elegant way as visitors scroll down the page, thereby attracting attention and reducing bounce rate.
In the SX-Creval system, almost all content blocks have built-in animation settings. You don't need to know any code; simply decide whether to enable it, and adjust the parameters like color to achieve top-notch webpage animation effects.
1. Animation Style Selection
When you expand a module's "Animation Settings," the first thing you need to do is choose an entrance animation for it. The system provides six pre-set, carefully tuned, modern web-level animations:
- 1. Gradual Rise : Content rises slowly from below and gradually becomes clearer. This is the most versatile and classic business animation, suitable for large blocks of text or cards.
- 2. From small to large : The content is scaled up from a small size to a normal size, creating a visual impact. This is suitable for emphasizing a single product image or core selling point.
- 3. From Large to Small : The content is scaled down from a large size to its normal size, and the viewer's attention will focus accordingly. This is suitable for full-screen background images or large image modules.
- 4. Central Unveiling : Like drawing back a stage curtain, it unfolds from the center to the sides or up and down, full of cinematic feel, and is very suitable for use in the "Brand Story" or "Major New Product Launch" section.
- 5. Gaussian Blur Fade In : Content gradually focuses and becomes clearer from a blurred state. This is a sophisticated animation effect with a strong "Apple vibe," suitable for large headlines and exquisite product renderings.
- 6. Parallax Background Image : When visitors scroll through a webpage, the background image moves slower than the content in front, creating a three-dimensional "parallax illusion." It is highly recommended for use in dividers or banners with background images.
(Note: If you want a certain block to remain stationary, simply leave the animation selection empty.)
2. Timing & Pacing of Animation Effects
After selecting the animation, you can also make "director-level" fine-tunings to bring the webpage to life:
Animation Delay
- Function : Determines how long the module should wait before starting to play animation after it comes into the visitor's view.
- Setting method : Enter a number (unit: seconds). For example, entering 0.5 means to start after half a second; entering 0 means to start immediately.
- Clever use : If you want the page to pause slightly after loading before surprising your customers, you can add a little delay.
Animation Duration
- Function : Determines the speed at which the animation plays .
- Setting method : Enter a number (unit: seconds). The larger the value, the slower the animation. The default recommended value is 1.0 second. If you want it to appear quickly with a "whoosh", you can enter 0.5; if you want a very slow and melodious presentation, you can enter 1.5 or even 2.0.
Stagger - Magic Parameter
- Function : Controls the "domino" effect of multiple elements (such as a list containing 3 product cards).
- Setting method : Enter a number (unit: seconds). The default recommended value is 0.1 seconds.
- Explanation of the principle : If you have an icon with 4 key selling points lined up in a row, without setting this parameter, all 4 icons will pop up simultaneously; if set to 0.1, they will pop up sequentially every 0.1 seconds (icon 1 pops up first, then icon 2, then icon 3), creating a rhythmic, streamlined effect .
- (Note: If the current module consists of a single element, such as a single image, adjusting this parameter will not produce any changes.)
💡 SX-Creval Designer Tips (Pro Tips)
- Restraint is the highest form of sophistication : avoid adding exaggerated animations to every small component of the webpage. It's recommended to use a gradient up or Gaussian blur gradient as the main theme throughout the site to maintain a professional and professional appearance.
- Make good use of the list's stagger (show items one by one) : In product listing pages, advantage card groups, and customer review carousels, be sure to make good use of the "show interval" parameter. This sequential rhythm can effectively guide overseas buyers to read your selling points one by one.
- Timing Recommendation : Generally, keeping the system default parameters (delay 0.3s / duration 1.0s / interval 0.1s) will provide an excellent experience. Unless there are special design requirements, it is not recommended to make the animation duration too long (more than 2 seconds) to avoid making impatient customers feel that the webpage is lagging.