Performance Tips

Here, we will look at some things to keep in mind when creating animations in order to keep performance optimal.

Lazy-Loading in Image Sequences

Enable lazy-loading for the Image Sequence feature. This ensures images are loaded only as they come into view, reducing initial load times and enhancing overall page speed.

Minimize ScrollTrigger Overuse

While ScrollTrigger adds dynamic interactions, overusing it can impact performance. Use it judiciously, especially on complex pages with multiple animations.

Optimize SVG Paths

For animations using SVG paths, ensure that the SVGs are optimized. Remove any unnecessary data in the SVG files to reduce their size without affecting the visual quality.

Streamline Global Settings

Adjust Global Settings in to match the needs of your site. Unnecessary global animations or effects can lead to performance lags.

Stagger Animations Efficiently

Use the Stagger feature wisely. Overlapping or unnecessarily delayed animations can cause jank. A well-timed stagger can create a smooth visual flow with minimal performance cost.

Use ‘Prevent Default’ Sparingly

In the Click Trigger feature, use the ‘Prevent Default’ option only when necessary, as overriding default browser behavior can sometimes lead to unexpected performance issues.

Limit Complex Animations on Mobile

Mobile devices often have less processing power than desktops. Limit the use of complex animations on mobile versions of your site to ensure smooth performance.

Regularly Update

Keep the plugin updated. Updates often include optimizations and improvements that can positively impact performance.

Monitor Animation Start and End Points

Carefully manage the 'Starts When' and 'Ends When' points in animations. Unnecessary prolongation of animations can cause higher CPU usage, impacting site speed.

Efficient Use of Repeat and Yoyo Features

While Repeat and Yoyo can create engaging effects, they can also consume more resources. Use these features judiciously, especially in sections with multiple animations.

Optimize Library

Regularly review the library to remove any unused animations. A streamlined library can reduce load times and improve overall site performance.

Balance Use of MouseMovement Triggers

MouseMovement triggers can be resource-intensive as they react to cursor movements. Use them sparingly and test their impact on different devices to ensure smooth performance.

Prioritize Animation Properties

Some CSS properties are more performance-intensive than others. For instance, animating properties like 'opacity' and 'transform' are typically more efficient than 'width' or 'height'.

Enable Clamp on Scroll Animations

In ScrollTrigger animations, use the 'Enable Clamp' option to keep animations within the bounds of the scrollable area, preventing unnecessary processing for out-of-view elements.

Utilize DrawSVG for Efficient SVG Animations

When animating SVGs, use the DrawSVG feature for efficient stroke animations rather than animating complex SVG paths directly.

Customize Easing Carefully

Choose easing functions that complement the performance. Avoid overly complex easing functions that may cause repaints or reflows, impacting page load and interactivity.

Use Hover Trigger Effectively

Like the Click Trigger, use the Hover Trigger feature judiciously. Overloading a page with hover animations can lead to performance issues, especially on devices with limited processing capabilities.

Optimize Custom GSAP Properties

If using custom GSAP properties in the animation, ensure they are optimized for performance, avoiding unnecessary calculations or complex logic that can slow down animations.

Test and Optimize for Various Browsers

Different browsers may handle animations differently. Regularly test your animations across various browsers to ensure consistent performance and make adjustments as necessary.

100 %