Jump to content
Search Community

nata_yar

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by nata_yar

  1. 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: 

     

    '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()

  2. 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:

    1. the picture in the header is supposed to move down on scroll
    2. the text in the about section
    3. 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? :sad:

    See the Pen vYRgEBy by natalia-yarysheva (@natalia-yarysheva) on CodePen

×
×
  • Create New...