Scroll animations are essential for a great user experience because they help users interact more easily with your website. While these animations used to be difficult to create with JavaScript, they are now much simpler. You can achieve them with just a few lines of CSS! In this blog, we’re going to show you how to create scroll animations in Elementor. Let’s dive in!
Simply apply this class name to any card you want to animate, then paste the code provided below into an HTML widget in Elementor.
<style>
.the-card{
animation: image both;
animation-timeline: view();
animation-range: entry 5% cover 40%;
}
@keyframes image{
0%{
filter: blur(50px);
scale: 0;
}
100%{
filter: blur(0px);
scale: 1;
}
}
</style>