sophiegumpo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by sophiegumpo
-
-
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>
Issue with gsap and scrolltrigger scripts in wordpress
in GSAP
Posted
wow - I cant believe I missed that spelling mistake - you don't understand how many times I checked it haha!
Thank you very much!