GSAP Help - GSAP code not running

[COG Digital]

Hi, 

 

I've added the below scripts to the header.php file of our website.

 

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js id='gsap-js'></script>

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollToPlugin.min.js' id='gsap-scroll-js'></script>

<script type='text/javascript' src="https://unpkg.com/@barba/core"></script>

 

My HTML and JS is below. I can console.log out from within the functions so I know they're loading however the GSAP does not seem to be. I'm also not getting any errors in console. The website is on wordpress divi theme if this is any help.

 

<div id="intro">

  <section class="video-panel" data-section="creative" data-permalink="#" style="right: 50%;">

    <div class="video-holder">

      <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4">

      </video>

      <h1>

        <span>Projects</span>

      </h1>

    </div>

  </section>

  <section class="video-panel" data-section="solutions" data-permalink="#">

        <div class="video-holder">

      <video class="overview-reel" playinline="" loop="" muted="" autplay="" preload="auto" src="/wp-content/uploads/2021/11/2.mp4">

      </video>

      <h1>

        <span>Client Services</span>

      </h1>

    </div>

  </section>

</div>

 

 

gsap.registerPlugin(ScrollToPlugin);

 

    window.addEventListener("load", function(e) {

 

    (function onIntroLeave(e) {

        gsap.to('#intro .video-panel[data-section="creative"]', {

          duration: 0.5,

          right: '50%',

          ease: "power3.out"

        })

    })

 

    (function onIntroHover(e) {

        var per = (e.pageX - window.innerWidth / 2) / (window.innerWidth * 2);

        var dir = Math.min(1, Math.max(-1, e.pageX - window.innerWidth / 2));

        var pow = Math.pow(per * 5.5, 2);

        var right = Math.min(100, Math.max(0, 50 + (50 * pow * dir))) + '%';

        gsap.to('#intro .video-panel[data-section="creative"]', {

          duration: 0.5,

          right: right,

          ease: "power3.out"

        })

    })

 

    (function onIntroClick(e) {

        intro.removeEventListener('mousemove', onIntroHover);

        var section = this.dataset.section;

        var permalink = this.dataset.permalink;

        if (section === 'creative') {

          var headerX = '-3em'

          var right = '0%'

          var otherVideo = intro.querySelector('.video-panel[data-section="solutions"] video')

        } else {

          var headerX = '3em'

          var right = '100%'

          var otherVideo = intro.querySelector('.video-panel[data-section="creative"] video')

        }

        otherVideo.pause()

        barba.prefetch('/' + section)

        gsap.to('#intro .video-panel[data-section="creative"]', {

          duration: 0.5,

          right: right,

          ease: "power3.inOut"

        })

        gsap.to('#intro .video-panel[data-section="' + section + '"] video', {

          duration: 0.5,

          width: '100vw',

          height: '100vh',

          ease: "power3.inOut"

        })

        var circle = gsap.to('#intro .video-panel[data-section="' + section + '"] video', {

          duration: 1,

          css: {

            clipPath: 'ellipse(101vw 101vw)'

          },

          ease: "power3.inOut"

        })

        gsap.to('#intro .video-panel[data-section="' + section + '"] h2', {

          duration: 0.5,

          x: headerX,

          ease: "power3.inOut"

        })

        circle.eventCallback('onComplete', openPage, [section, permalink])

      })

 

      // (function videoLoaded() {

      //   vLoaded++;

      //   if (vLoaded === vCount) {

      //     introLoaded();

      //     pageLoaded();

      //   }

      // })

 

    });

 

 

Thanks

[GreenSock]

Welcome to the forums, @COG Digital. It's pretty tough for us to troubleshoot without a minimal demo. This kinda sounds like it might a Barba issue, like you're not tapping into its lifecycle events properly so that your GSAP code runs when the corresponding elements exist but I'm not sure at all. Once we see a minimal demo, perhaps we'll have more insight. 

 

Did you add a console.log() right where your tweens are supposed to be firing just to make absolutely sure that they're even getting executed?