nata_yar

thank you so much for your help!! I removed the CDNs and it now loads properly?

Hi, thanks for your reply! Desired behaviour: each <p className='highlight'> changes colour on scroll - fades in and out; picture in the header moves down only on scroll. What I currently have: they change colour only once, on load and thats it. picture moves on its own , on load, without scrolling (you could see it on a deployed website- http://natayar.com/ ) I loaded gsap and scrollTrigger in my index.js via CDN like these: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script> 'and I have a separate file with animation where I imported gsap and scrollTrigger like this : import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); Everything works perfectly well on local host but on a deployed website still I get an error as if i didn't load neither of them gsap-core.js:87 Invalid property scrollTrigger set to {trigger: '.about-container', scrub: true, start: '-60%', end: '20%'} Missing plugin? gsap.registerPlugin()

Hello, everyone! I'v been struggling with understanding why my animation worked on scroll on localhost, but after deployment all animations fire on load and not on scroll , here's the live website http://natayar.com/ What goes wrong: the picture in the header is supposed to move down on scroll the text in the about section the section titles I built a codepen for the text in About section. I console logged ScrollTrigger: ScrollTrigger ƒ ScrollTrigger(vars, animation) { _coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)"); this.init(vars, animation); } Does anyone have any ideas what direction i should look at?