Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
COG Digital

GSAP Help - GSAP code not running

Recommended Posts

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

Link to comment
Share on other sites

  • COG Digital changed the title to GSAP Help - GSAP code not running

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? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×