Jump to content


  • Posts

  • Joined

  • Last visited

sophiegumpo's Achievements

  • Week One Done
  • One Month Later

Recent Badges



  1. wow - I cant believe I missed that spelling mistake - you don't understand how many times I checked it haha! Thank you very much!
  2. I'm having the same issue with Wordpress. although the scroll trigger script is loading, my custom script cannot seem to use the functionality. I'm at a loss as to how to get this functioning - please advise. Invalid property scrollTigger set to {trigger: ".categories__grid--item", toggleActions: "restart none none none"} Missing plugin? gsap.registerPlugin() This is my custom scripts: hero animation is working as expected but the scroll trigger doesn't fire (function ($, root, undefined) { $(function () { 'use strict'; // DOM ready, take it away gsap.registerPlugin(ScrollTrigger); //DESKTOP //if (window.matchMedia("(min-width: 1024px)").matches) { if (window) { jQuery(document).ready(function () { init_scroll_trigger(); init_hero_animation(); }); } function init_hero_animation() { var toolTimeline = new TimelineMax(); var duration = .5; toolTimeline.from('.hero__title', duration, {opacity: 0, scale: 25, ease: Linear.easeInOut}, .2); toolTimeline.from('.hero__content p', duration, {opacity: 0, scale: 25, ease: Linear.easeInOut}, .5); toolTimeline.to('.hero__button .mybutton', duration, {left: 0, ease: Linear.easeInOut}, .2); } function init_scroll_trigger() { //ScrollTrigger.refresh(); // console.log(ScrollTigger); gsap.registerPlugin(ScrollTigger); gsap.to(".categories__grid--item", { scrollTigger: { trigger: ".categories__grid--item", toggleActions: "restart none none none" }, y: -50, duration: 1 }); } }); })(jQuery, this); This is the order the scripts are being loaded in the header <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js?ver=5.6.1' id='gsap-js'></script> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js?ver=5.6.1' id='gsap-js-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/EasePack.min.js?ver=5.6.1' id='ease-pack-js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js?ver=5.6.1' id='scrolltrigger-js'></script>