The simplest way to integrate the Lordicon animated icon into a Webflow project is by using a Lottie Animation element. This page reveals a variety of integration ways.
Plays animation when the icon enters the viewport. This include scrolling and on a page load.
Solution: Use "in-..." icon animation with Lottie element interaction: "When scrolled into view".
Tip: Add delay time to create a sequence animation.
Plays animation when the cursor hover over the Lottie element.
Solution: Use default "hover-..." icon animation with Lottie element interaction: "Mouse hover"
Plays animation infinetly only when it enters the viewport. It is better than the build-in loop animation, because it dosen't pleay the animation when it is not needed.
Solution: Use "loop-..." or "hover-..." icon animation with Lottie element interaction: 'When scrolled into view' and enable "Loop".
Tip: Consider adding a delay time with "hover-..." icon animations to give it a more time to breathe.
Plays animation when the cursor hover over the Lottie element, and plays it in reverse when the cursor leaves the icon block.
Solution: Use "morph-..." icon animation with Lottie element interaction: "Mouse hover" with "reverse" animation "on hover out"
This is a combination of an "Intro" and "Hover", where icon first appears on the screen, and then becomes interactive.
Solution: Utilize the "in-..." icon animation to reveal the design, and then use "hover-..." animation to create interaction.
Note: Refer to the video tutorial on how to adjust the animation timing for a specific icon animation.
This is a combination of an "Intro" and "Morph", where icon first appears on the screen, and then becomes interactive.
Solution: Utilize the "in-..." icon animation to reveal the design, and then use "morph-..." animation to create interaction.
Note: Refer to the video tutorial on how to adjust the animation timing for a specific icon animation.