I am currently working to integrate gsap into a project. which is a static landing page. I am using a CMS with dojo.js being used (don't even get me started...it is super deprecated)
Currently I am just using two CDN scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js "></script>
which are both being loaded at the bottom of my html, but before my script tag
I can get the gsap to load using
window.addEventListener('load', function() {
gsap.from(".date-image", {
y: 100,
duration: 1,
})
})
the ".date-image" animates as expected.
However, if I attempt to register the scrollTrigger plugin it doesn't recognize it.
gsap.registerPlugin(ScrollTrigger)
console.log("ScrollTrigger:", ScrollTrigger)
window.addEventListener('load', function() {
gsap.from(".date-image", {
y: 100,
duration: 1,
scrollTrigger: {
trigger: ".date-image",
start: "top 60%",
end: "top 30%",
markers: true,
scrub: 2,
toggleActions: "restart none none none",
}
})
})
Console:
Invalid property scrollTrigger set to {trigger: '.date-image', start: 'top 60%', end: 'top 30%', markers: {…}, scrub: 2, …} Missing plugin? gsap.registerPlugin()
I have tried to load the "gsap.registerPlugin(ScrollTrigger) it at different times, to no avail, and I was hoping that someone might mention how they have loaded the plugin or where they have loaded it?
I know that it is preferred that I show a working demo in these forums, however, using a CMS, it's not possible. I'm relatively new in web development and unfortunately the people I work with don't like to help new people, but grateful for resources to try to get some help elsewhere.
*Also want to note that the scrollTrigger animation does work as expected if I recreate in Codepen
