[ScrollTrigger and DrawSVG in wordpress]

Thanks! It was loading - I think I ran into a caching issue. I just turned off some plugins and it seems to be loading without the error.

 

Thanks!

[ScrollTrigger and DrawSVG in wordpress]

I'm trying to figure out the best way to use GSAP / ScrollTrigger and DrawSVG to animate some icons on my wordpress site.

 

I have used scrollTrigger before so I know how to enqueue the scripts::

function theme_gsap_script() {
    wp_enqueue_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js', array(), false, true );
    wp_enqueue_script( 'gsap-scroll-trigger', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js', array(), false, true );
    wp_enqueue_script( 'draw-svg-plugin', get_stylesheet_directory_uri() . '/js/DrawSVGPlugin.min.js', array(), false, true );
    
}
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );

 

Then I set up a simple script to load on the page after the other GSAP files have been loaded - 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  // wait until images, links, fonts, stylesheets, and js is loaded
window.addEventListener("load", function(e) {
    //register the plugins
        gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);
    // GSAP code 

        gsap.from(".molecule", {duration:1, drawSVG:"100%"});

    });//window event listener
});//document event listener
 

 

The problem with this is I get an error that says DrawSVGPlugin is not defined - if I remove the registerPlugin line - the error says I need it. I know this must be something simple.

Thanks,

John

 

[Elementor/Wordpress weirdness when using ScrollTrigger]

Hi Zach,

Thanks for the quick response. I think it's because the images are set to lazy load. 

 

Thanks,

John

[Elementor/Wordpress weirdness when using ScrollTrigger]

I am building a site and wanted to know if anyone else has come across this issue. The start and end points of sections lower on the page don't seem to line up but, if I change the browser size they update and line up perfectly.

 

Here's the URL to show what I am talking about - https://decarttx.wpmudev.host/our-science/

 

Thanks!