Can not get GSAP/Scrolltrigger to animate on Webflow

[Shara Belton]

Here is the staging site: https://ecoshift-a7931d-3eeb658156c6e56a2856d0e.webflow.io/ We are just testing how GSAP works and bought some code over from an existing Wordpress site. Ignore the styling - we are just focusing on animations right now for testing purposes to see if Webflow is the move for us.

 

I've tested everything under the sun, and even modified working code from the wordpress site to see if I can somehow get it to work on Webflow - but nothing works. 

 

I've tried a few different versions of the same code:

"use strict";

  (function ($) {
    let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg');
    let listItems = document.querySelectorAll('.split-list-item');
    console.log("The js file is being loaded");
    console.log(listItems);
    console.log(largeFlowerSVGs);
  
    init();
  
    function animateFlowerSVGs() {
      if (!largeFlowerSVGs.length) {
        return;
      }
  
      gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => {
        // Progressively enhance animation
        // Animation will be only triggered if JS is loaded on the page
        largeFlowerSVG.classList.add('gsap-loaded');
  
        let animationSequence = gsap.timeline({
          scrollTrigger: {
            trigger: largeFlowerSVG,
            start: 'center bottom-=200',
            // The SVG will be given this clrolled into view
            // It will also be given this class if the section was already scrolled pass on page load
            toggleClass: 'has-been-scrolled',
            once: true
          }
        });
      });
    }
  
    function animateListItems() {
      if (!listItems.length) {
        return;
      }
  
      Array.from(listItems).forEach((splitListItem) => {
        // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements)
        //       Progressively enhance animation
        //       Animation will be only triggered if JS is loaded on the page
        splitListItem.classList.add('gsap-loaded');
  
        let listItems = splitListItem.querySelectorAll('.split-list-item');
  
        Array.from(listItems)
          // Set a scrolltrigger for each element to ensure the scroll animation only occurs as
          // each element comes into view
          .forEach((listItem) => {
            gsap.from(listItem, {
              yPercent: 10,
              opacity: 0,
              duration: 0.3,
              scrollTrigger: {
                trigger: listItem,
                start: 'top bottom-=250',
                toggleClass: 'has-been-scrolled',
                once: true
              }
            });
          });
      });
    }
  
    function init() {
      gsap.registerPlugin(ScrollTrigger);
  
      window.addEventListener('load', function () {
        animateFlowerSVGs();
        animateListItems();
      });
    }
  })(jQuery);
  

"use strict";
    let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg');
    let listItems = document.querySelectorAll('.split-list-item');
    console.log("The js file is being loaded");
    console.log(listItems);
    console.log(largeFlowerSVGs);
  
    init();
  
    function animateFlowerSVGs() {
      if (!largeFlowerSVGs.length) {
        return;
      }
  
      gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => {
        // Progressively enhance animation
        // Animation will be only triggered if JS is loaded on the page
        largeFlowerSVG.classList.add('gsap-loaded');
  
        let animationSequence = gsap.timeline({
          scrollTrigger: {
            trigger: largeFlowerSVG,
            start: 'center bottom-=200',
            // The SVG will be given this clrolled into view
            // It will also be given this class if the section was already scrolled pass on page load
            toggleClass: 'has-been-scrolled',
            once: true
          }
        });
      });
    }
  
    function animateListItems() {
      if (!listItems.length) {
        return;
      }
  
      Array.from(listItems).forEach((splitListItem) => {
        // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements)
        //       Progressively enhance animation
        //       Animation will be only triggered if JS is loaded on the page
        splitListItem.classList.add('gsap-loaded');
  
        let listItems = splitListItem.querySelectorAll('.split-list-item');
  
        Array.from(listItems)
          // Set a scrolltrigger for each element to ensure the scroll animation only occurs as
          // each element comes into view
          .forEach((listItem) => {
            gsap.from(listItem, {
              yPercent: 10,
              opacity: 0,
              duration: 0.3,
              scrollTrigger: {
                trigger: listItem,
                start: 'top bottom-=250',
                toggleClass: 'has-been-scrolled',
                once: true
              }
            });
          });
      });
    }
  
    function init() {
      gsap.registerPlugin(ScrollTrigger);
  
      window.addEventListener('load', function () {
        animateFlowerSVGs();
        animateListItems();
      });
    };
  

    let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg');
    let listItems = document.querySelectorAll('.split-list-item');
    console.log("The js file is being loaded");
    console.log(listItems);
    console.log(largeFlowerSVGs);
  
    init();
  
    function animateFlowerSVGs() {
      if (!largeFlowerSVGs.length) {
        return;
      }
  
      gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => {
        // Progressively enhance animation
        // Animation will be only triggered if JS is loaded on the page
        largeFlowerSVG.classList.add('gsap-loaded');
  
        let animationSequence = gsap.timeline({
          scrollTrigger: {
            trigger: largeFlowerSVG,
            start: 'center bottom-=200',
            // The SVG will be given this clrolled into view
            // It will also be given this class if the section was already scrolled pass on page load
            toggleClass: 'has-been-scrolled',
            once: true
          }
        });
      });
    }
  
    function animateListItems() {
      if (!listItems.length) {
        return;
      }
  
      Array.from(listItems).forEach((splitListItem) => {
        // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements)
        //       Progressively enhance animation
        //       Animation will be only triggered if JS is loaded on the page
        splitListItem.classList.add('gsap-loaded');
  
        let listItems = splitListItem.querySelectorAll('.split-list-item');
  
        Array.from(listItems)
          // Set a scrolltrigger for each element to ensure the scroll animation only occurs as
          // each element comes into view
          .forEach((listItem) => {
            gsap.from(listItem, {
              yPercent: 10,
              opacity: 0,
              duration: 0.3,
              scrollTrigger: {
                trigger: listItem,
                start: 'top bottom-=250',
                toggleClass: 'has-been-scrolled',
                once: true
              }
            });
          });
      });
    }
  
    function init() {
      gsap.registerPlugin(ScrollTrigger);
  
      window.addEventListener('load', function () {
        animateFlowerSVGs();
        animateListItems();
      });
    };

window.Webflow ||= [];
window.Webflow.push(() => {
  (function ($) {
    let largeFlowerSVGs = document.querySelectorAll('.large-logo-svg');
    let listItems = document.querySelectorAll('.split-list-item');
    console.log("The js file is being loaded");
    console.log(listItems);
    console.log(largeFlowerSVGs);
  
    init();
  
    function animateFlowerSVGs() {
      if (!largeFlowerSVGs.length) {
        return;
      }
  
      gsap.utils.toArray('.large-logo-svg').forEach((largeFlowerSVG) => {
        // Progressively enhance animation
        // Animation will be only triggered if JS is loaded on the page
        largeFlowerSVG.classList.add('gsap-loaded');
  
        let animationSequence = gsap.timeline({
          scrollTrigger: {
            trigger: largeFlowerSVG,
            start: 'center bottom-=200',
            // The SVG will be given this clrolled into view
            // It will also be given this class if the section was already scrolled pass on page load
            toggleClass: 'has-been-scrolled',
            once: true
          }
        });
      });
    }
  
    function animateListItems() {
      if (!listItems.length) {
        return;
      }
  
      Array.from(listItems).forEach((splitListItem) => {
        // NOTE: Progressive enhancement isn't needed here since GSAP works well with HTML (non-SVG elements)
        //       Progressively enhance animation
        //       Animation will be only triggered if JS is loaded on the page
        splitListItem.classList.add('gsap-loaded');
  
        let listItems = splitListItem.querySelectorAll('.split-list-item');
  
        Array.from(listItems)
          // Set a scrolltrigger for each element to ensure the scroll animation only occurs as
          // each element comes into view
          .forEach((listItem) => {
            gsap.from(listItem, {
              yPercent: 10,
              opacity: 0,
              duration: 0.3,
              scrollTrigger: {
                trigger: listItem,
                start: 'top bottom-=250',
                once: true
              }
            });
          });
      });
    }
  
    function init() {
      gsap.registerPlugin(ScrollTrigger);
  
      window.addEventListener('load', function () {
        animateFlowerSVGs();
        animateListItems();
      });
    }
  })(jQuery);
});
  

My test console.logs are showing on the console, and everything points to the animations working. However, the animations themselves just won't show on the computer.  

[ryan_labar]

One thing that would be helpful would be to add markers: true, to the ScrollTrigger objects, so see if those are being added. Also, it looks like you're never calling your init function, so your code is never being run....

[Shara Belton]

19 minutes ago, ryan_labar said:

One thing that would be helpful would be to add markers: true, to the ScrollTrigger objects, so see if those are being added. Also, it looks like you're never calling your init function, so your code is never being run....

Hi Ryan,

 

I have markers: True on the current one, but it won't show on webflow for some reason. Also, the init() is called right after my console.logs. I can tell the code is being run because my console.logs show in the console and spits out a list of Nodes on the page for the two important classes .split-list-item and .large-logo-svg.

[ryan_labar]

It also looks like you're defining listItems twice and have it nested inside of itself. I'm not seeing markers on the linked env yet.

[Shara Belton]

I ended up just rewriting the code and the animation that I rewrote is working now. Might have something to do with how the code is structured and all the function calls. For some reason it worked with the Wordpress version of the site and note webflow. Once I figure it out, I will try to remember to post here!