How to make a snowing effect using GSAP in Elementor

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>


// Remember the css class name the script is looking for is snowfallContainer


window.onload = async function() {
    const containers = document.querySelectorAll('.snowfallContainer');

    const initializeSnowfall = async (container) => {
        container.style.position = 'relative';
        container.style.overflow = 'hidden';

        const snowflakeCount = 200;
        const snowflakes = [];

        function random(min, max) {
            return Math.random() * (max - min) + min;
        }

        // Initialize snowflakes
        for (let i = 0; i < snowflakeCount; i++) {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.position = 'absolute';
            snowflake.style.top = `${random(-100, 0)}px`;
            snowflake.style.left = `${random(0, container.offsetWidth)}px`;
            
            // snowflakes Sizes
            snowflake.style.width = `${random(2, 20)}px`;
            snowflake.style.height = snowflake.style.width;
            
            // snowflakes colour and transparency randomizer
            snowflake.style.backgroundColor = `rgba(255, 255, 255, ${random(0.3, 0.8)})`;
            snowflake.style.borderRadius = '50%';
            snowflake.style.pointerEvents = 'none';
            
            
            // snowflakes blurryness
            snowflake.style.filter = `blur(${random(0, 3)}px)`;
            container.appendChild(snowflake);

            // Set initial positions
            gsap.set(snowflake, {
                y: random(-100, 0),
                x: random(0, container.offsetWidth)
            });

            snowflakes.push(snowflake);
        }

        // Animate snowflakes
        snowflakes.forEach((snowflake) => {
            const duration = random(7, 15); // Increase duration range for smoother falling
            const startX = parseFloat(snowflake.style.left);

            // Create a timeline for combined vertical and horizontal movement
            const tl = gsap.timeline({ repeat: -1 });

            // Add the vertical falling motion with ease for smoother movement
            tl.to(snowflake, {
                y: container.offsetHeight + 50,
                duration: duration,
                ease: 'power1.inOut', // Smooth easing effect
                delay: random(0, 5)
            });

            // Add horizontal swaying using sine wave
            gsap.to(snowflake, {
                x: `+=${random(20, 50)}`,
                duration: random(3, 5), // Adjust duration for more natural swaying
                ease: "sine.inOut",
                repeat: -1,
                yoyo: true,
                delay: random(0, 5)
            });
        });
    };

    // Process containers asynchronously
    const promises = Array.from(containers).map(container => initializeSnowfall(container));
    await Promise.all(promises);
};
</script>