Ehsan.shv

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.

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.

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.

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

Live Demo

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

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

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.

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

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