[Gsap scrolltrigger not working in React component]

An update for this topic:

1- Previous approach to executing triggers after smooth scrollbar initialization didn't work in production. I've solved executing triggers after parent rendering by the global state. At first parent renders then set a global state and then the child component renders.

2- I've published a React package by smooth-scrollbar and GSAP that has some components for scroll-based animations. Check repo.

If there is an issue or you have suggestions or ideas please tell me.

[Gsap scrolltrigger not working in React component]

10 minutes ago, OSUblake said:

 

I'm also asking for curiosity because I've never used Suspense before. 😋

Suspense and Lazy loading are amazing stuff for async and improving performance in React. I don't know have you seen Kent C. Dodds course about React before or no, if don't I suggest you to see React Performance section from that course.

[Gsap scrolltrigger not working in React component]

11 minutes ago, OSUblake said:

Would you mind adding what you did with Supense to your CodeSandbox so other people can see in case they have the same issue?

Yes, it's done. However, this is a part of an open-source library that I'm working on it and when it's complete I'll add the repo link to this topic.

[Gsap scrolltrigger not working in React component]

6 hours ago, OSUblake said:

The first thing you need to do for React is to make sure React 18 isn't going create any issues. You need to make sure it doesn't create something twice.

 

 

You also need to create that smooth scrollbar thing before creating your ScrollTriggers. Code in a child component will run before their parent, so that means your smooth scrollbar is being created last.

 

 

Thanks. Yes, you're right. what a nice topic that you linked. I learned a lot. I handled rendering child component after parent component by <React.Suspense></React.Suspense>. 

[Gsap scrolltrigger not working in React component]

28 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Live Demo

[Gsap scrolltrigger not working in React component]

Hello, I'm working on a React component for parallax image effect. The component:

import React, { FC, useLayoutEffect, useRef } from 'react';

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

interface ParallaxImageProps {
  src: string;
  alt?: string;
}

export const ParallaxImage: FC<ParallaxImageProps> = ({ src, alt }) => {
  const parallaxImage = useRef(null);
  const parallaxImageInner = useRef(null);

  useLayoutEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: parallaxImage.current,
        scroller: '.nice-scroll-container',
        scrub: true,
        pin: false,
      },
    });
    tl.from(parallaxImageInner.current, {
      yPercent: -10,
      ease: 'none',
    }).to(parallaxImageInner.current, {
      yPercent: 10,
      ease: 'none',
    });
  }, []);

  return (
    <figure className="parallax-image" ref={parallaxImage}>
      <img
        src={src}
        alt={alt}
        className="parallax-image__inner"
        ref={parallaxImageInner}
        onLoad={() => ScrollTrigger.refresh()}
      />
    </figure>
  );
};

 I had tested onEnterand onLeavemethods and those executed in right time but animating image from yPercent: -10 to yPercent: 10 have not been working properly and have been triggering when the image comes in middle of the viewport. Any solution?

Live Demo

[Circle animation that follows cursor mouse move event]

On 4/30/2022 at 9:44 AM, blizve0 said:

@Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm.

https://haspr-agency-portfolio.vercel.app

Just message me on frustasio@gmail.com or on gsap forum

Hi, It's done. please check the repo.

[Circle animation that follows cursor mouse move event]

6 hours ago, blizve0 said:

@Ehsan.svh Hi Thanks I tried to do that too but failed, check out the complete implementation of the cursor here and tell me if you're interested in packaging this to npm.

https://haspr-agency-portfolio.vercel.app

Just message me on frustasio@gmail.com or on gsap forum

I think this is inspired by Cuberto. If you mean magnetic and sticky cursor, yes I'm working on it. Because in a real app you may have some routes it makes it a bit complex. I'm trying to fix it but it may take time. When I fix it, will send you an Email or quote here. If there is an issue please tell me or open an issue in the repo.

[Circle animation that follows cursor mouse move event]

16 hours ago, GreenSock said:

@Ehsan.shv you might want to look into the new gsap.quickTo() method to improve performance even more. 

Yes, I did and published version 0.5.0. If there is an issue please tell me. Thanks for your help.

[Circle animation that follows cursor mouse move event]

So I packaged this cursor to npm. You can use it in your React apps. Repo