Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Hossein Rahimi

Members
  • Posts

    4
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Hossein Rahimi's Achievements

Newbie

Newbie (1/14)

2

Reputation

  1. ;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.
  2. 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.
  3. 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.
×