Animate separator won’t work

  • Upshift-86

    (@upshift-86)


    1 year, 6 months ago

    I am trying re-create an animated separator (horizontal border) that starts at 0px and opens right as an user scrolls down page. I want it 8px height and about 120px wide. For the animation, I want it to work similar to the one shown here ref: Elementor Line, Image and Text Reveal On Scroll. I did hire a developer to do this for my Elementor website, but it only works on the home page and only 2x/page. I want to use it throughout my site. Any help would be greatly appreciated. Here is the Javascript he used: 

    <script>
    document.addEventListener("DOMContentLoaded", function() {
    	window.addEventListener("load", function(e){
        gsap.registerPlugin(ScrollTrigger);

        gsap.fromTo('.selector-del-divisor-1 .elementor-divider-separator', 
            { width: 0 },
            {
                width: "100%",
                duration: 2, // Duración de la animación en segundos
                scrollTrigger: {
                    trigger: '.selector-del-divisor-1 .elementor-divider-separator',
                    start: 'top 80%', // Comienza la animación cuando el top del divisor llega al 80% del viewport
                    toggleActions: 'play none none none' // Acciones de animación: play, pause, resume, reverse
                }
            });
    });
    	
    	gsap.fromTo('.selector-del-divisor-2 .elementor-divider-separator', 
            { width: 0 },
            {
                width: "100%",
                duration: 2, // Duración de la animación en segundos
                scrollTrigger: {
                    trigger: '.selector-del-divisor-2 .elementor-divider-separator',
                    start: 'top 80%', // Comienza la animación cuando el top del divisor llega al 80% del viewport
                    toggleActions: 'play none none none' // Acciones de animación: play, pause, resume, reverse
                }
            });
    });

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Dilip Modhavadiya

    (@dilip2615)

    1 year, 6 months ago

    Hello @upshift-86

    To make the animated separator work throughout your site, ensure you use a universal selector or a common class and dynamically target all instances using JavaScript. Here’s the improved code:

    <script>
document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("load", function() {
        gsap.registerPlugin(ScrollTrigger);

        document.querySelectorAll('.elementor-divider-separator').forEach((divider) => {
            gsap.fromTo(divider, 
                { width: 0 },
                {
                    width: "100%",
                    duration: 2,
                    scrollTrigger: {
                        trigger: divider,
                        start: 'top 80%',
                        toggleActions: 'play none none none'
                    }
                });
        });
    });
});
</script>

    This will apply the animation to all dividers with the class .elementor-divider-separator site-wide.

    Thread Starter Upshift-86

    (@upshift-86)

    1 year, 6 months ago

    Thank you so much for your help. I can only get the animated separator to animate on home page. I have it copied on both the long-cut pasta and short-cut pasta pages but it doesn’t work. I don’t understand java at all. I understand css. I added the java you provided to elementor > custom code; and the class to separator (divider). Doesn’t work on either page. How can I make this work on other pages besides home?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Animate separator won’t work’ is closed to new replies.