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>