#Gsap scrolltrigger not detecting all classes

32 messages · Page 1 of 1 (latest)

distant sinew
#

I have a simple scrolltrigger animation:

import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
document.addEventListener("astro:page-load", () => {
gsap.fromTo(
  ".fadeup-st",
  {
    opacity: 0,
    y: 25,
  },
  {
    opacity: 1,
    y: 0,
    duration: 0.5,
    ease: "cubic-bezier(0,0,0.5,1)",
    scrollTrigger: {
      trigger: ".fadeup-st",
      start: "top 80%",
      end: "bottom 20%",
      toggleActions: "play none none reverse",
      markers: true,
    },
  }
);

It's only detecting the first element that appears on the screen. In console I get GSAP target not found but have intialized all gsap pkgs. Not sure what the problem is! Thank you.

#

title: product overview with class attribute fadeup-st

#

scrolltrigger will show where the animation is being played

hot drum
#

Where are you using that code?

#

Also I don't even have mine sitting in an event listner but im presuming thats just something youre doing for view transitions

distant sinew
#

this is inside a script tag in the page.astro

hot drum
#

and I have my script in the head of my layout

distant sinew
hot drum
#

This is how I have mine setup though bare in mind I'm not using view transitions and my animations are a bit simpler, but maybe it can help

<head>
  ...
  <script>
    import { gsap } from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';

    gsap.registerPlugin(ScrollTrigger);

    gsap.from('#content-about', {
      opacity: 0,
      x: -75,
      duration: 1,
      delay: 0.1,
      stagger: 0.3,
      scrollTrigger: { trigger: '#content-about',          start: 'bottom bottom' },
      });

    gsap.from('#content-cta', {
      opacity: 0,
      duration: 1,
      x: -75,
      stagger: 0.3,
      delay: 0.2,
      scrollTrigger: { trigger: '#content-cta', start:     'bottom bottom' },
      });
  </script>
</head>
distant sinew
#

gotcha, the only reason why im using viewtransitions is purely for the spa routing

#

i think viewtransitions is doing something which is messing up gsap

hot drum
#

You could try adding the data-astro-rerun prop to your script instead of adding an event listener for page load

#

Ah maybe not

#

Pretty sure that inlines it which would break the imports

#

Side note, I like your cards for your projects page

distant sinew
#

thanks, ill look into it more

hot drum
#

Could also try changing page-load to after-swap

distant sinew
hot drum
#

o my

#

Maybe try using ID instead of a class, more specific selector might help it find it easier

distant sinew
#

I'm getting an error with defining gsap & gsap scrolltrigger globally

#

super confused

#

moved my script tags inside my layout tags

#

yet, gsap still functions 50%

#

super weird

hot drum
#

Yeah only working on one of them is pretty strange

distant sinew
#

I need the gsap gods

hot drum
#

No what we need is animate-timeline to become baseline lol

distant sinew
#

not coming out soon 😦