Hossein Rahimi

Hello members. In my recent project, I want to animate something when the user is scrolling. What is the best practice of using GSAP here? I'm using ReactJS for my project. This is an example of my code and I think it can be much better. Cause I feel slow and delayed animations. useEffect(() => { const gsap = require("gsap").gsap; var _reqID; function loop() { var doc = aboutParent; var fh = footer.scrollHeight; var percent = (doc.scrollTop / (doc.scrollHeight - doc.clientHeight - fh)) * 100; var update = (percent / 100) * differ + start; if (Math.round(update) <= end && Math.round(update) >= start) { gsap.to(scrollerSVG, { duration: 0.5, x: 445, y: update, }); } // run the loop _reqID = requestAnimationFrame(loop); } _reqID = requestAnimationFrame(loop); return function cancel() { cancelAnimationFrame(_reqID); }; }, []); It's not all of the code. But I think its enough for you to understand my opinion. I would be thankful if you help me with this.

;Hi there. I was looking for installing Morphsvg to React. I install GSAP with yarn add gsap. But I won't able to import that. When I open all.js in gsap root folder, I saw something wired! // bonus tools /* import DrawSVGPlugin from "./DrawSVGPlugin.js"; import MorphSVGPlugin from "./MorphSVGPlugin.js"; import Physics2DPlugin from "./Physics2DPlugin.js"; import PhysicsPropsPlugin from "./PhysicsPropsPlugin.js"; import ScrambleTextPlugin from "./ScrambleTextPlugin.js"; import ThrowPropsPlugin from "./ThrowPropsPlugin.js"; import GSDevTools from "./GSDevTools.js"; import SplitText from "./SplitText.js"; import CustomBounce from "./CustomBounce.js"; import CustomEase from "./CustomEase.js"; import CustomWiggle from "./CustomWiggle.js"; export { DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, ThrowPropsPlugin, GSDevTools, SplitText, CustomBounce, CustomEase, CustomWiggle } */ These codes commented and MorphSVGPlugin is commented too! Why?! Please edit this block. I can't deploy my app for other developers. cause they aren't able to access gsap MorphSVGPlugin.

I found a way to use GSAP to React with Next.js without a problem. You can load GSAP components in componentDidMount() method of your React Class. Like this: componentDidMount(){ const GSAP = require('gsap'); const { TweenMax, TimelineLite, Power4 } = GSAP; TweenMax.to(el, 1, { top: -100 }); } There is an easy reason for problems like this in Next.js. Next.js is an SSR library and GSAP is a Client Side library. When You import GSAP in the top of your project, it throws an error because GSAP can't access to Window object in JS. But, when you require it in your componentDidMount(), it will require after the page loaded and it will access to Window object in js. Hope it will help you all.

Hello guys. I'm using Next.js and React and now I need to add GSAP TweenLite to my project but I have a couple of errors! This is my code: import React from 'react'; import { TweenLite } from "gsap/all"; class Navbar extends React.Component { constructor(){ super(); this.state = { isFixed: false }; this.navbar = null; this.navbarAnim = null; } componentDidMount(){ this.navbarAnim = TweenLite.to(this.navbar, 2, { top: 100 }); } render(){ return ( <nav className="navbar" ref={nav => this.navbar = nav}> <div className="navbar-container"> <img src={'/static/images/logo-sm.png'} className="logo" alt="هیناوا" /> <ul className="navbar-list"> <li><a href="#">چرا خانه هوشمند؟</a></li> <li><a href="#">چرا هیناوا</a></li> <li><a href="#">محصولات</a></li> <li><a href="#">اپلیکیشن</a></li> <li><a href="#">ارتباط با ما</a></li> </ul> </div> </nav> ); } } export default Navbar; I also installed next-plugin-transpile-modules and this is next.js config file: const withSass = require('@zeit/next-sass'); const withCSS = require('@zeit/next-css'); const withImages = require('next-images'); const withTM = require('next-plugin-transpile-modules'); module.exports = withCSS(withSass(), withImages(), withTM()); But there are errors yet on my screen. I attached the screenshot. Please help me solve my problem. I'm not so familiar with Next.js. Regards.