Jump to content

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

Search the Community

Showing results for tags 'react'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello guys. Please help me with some strange behavior. I have parent component (React) where i initialize ScrollTrigger.scrollerProxy with Locomotive Scroll as you recommended in docs (scrollerProxy). If i try to use scrollTrigger inside that parent component (using useEffect) - everything works fine. But if i use scrollTrigger inside child component and provide the same scroller element (with id #smooth-scroll) then i have an issue. I've already tried: to call ScrollTrigger.refresh() inside child component; make reference (useRef) to locomotive instance in
  2. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-tran
  3. I used gsap.fromto animate a component when it is rendered through a conditional statement something like below: const [openComponent, setOpenComponent] = useState(false); <button onClick={_=>setOpenComponent(true)}>Open</button> return {openComponent && <Component/>} and in the Component.jsI used useEffectto render the animation useEffect(_ => { gsap.set(ref.current, { y: 0 }); gsap.from(ref.current, { y: "-100%", duration: 0.5, ease: "expo.out", }); }, []); However,
  4. Hi there, I am running into an odd issue with my React site and using GSAP. Website: https://gpstaging.netlify.app For all the scroll based triggers, if I resize the window they will either disappear https://take.ms/6VGoD or not fire their animation when scrolling down the page. It looks like they disappear because an inline style of opacity: 0 and visibility: none is getting applied to them. But I have no idea why and even when I removed all the other components that had GSAP animation applied, the styles keep showing up. Here is a simplified d
  5. Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do?
  6. Hey GSAP Community. UPDATE: I have included the CodeSandbox below in a reply thanks to the great tip from Rodrigo that I can import it So the goal...to have the words PROJECTS and WRITINGS scroll from right side of page to left side of page fairly slowly on the scroll down. I also would like the word/heading to be pinned at the top ideally until the next section (writings) comes into view, then it will scroll up and probably even fade out. And then WRITINGS will scroll across as we're scrolling down and get pinned too for a short time or until the CONTACT div pops up into view or some
  7. Hi everyone, First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next. So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which
  8. I'm noodling around with React/TransitionGroup/GSAP and I'm attempting to make a carousel. From an array of images, I'm setting the state to be one object. Using transition group, I want to leverage greensock to transition one image out, followed by one image in. I'm using state to keep track of the "active" image, there is only one image in the state. So the rationale is, when this state update, the old state will transition out, and then replaced by the new node in the state. So there isn't a group of components per-se. I'm hoping that I can get Transition group to
  9. Hi guys. Just wondering if it would be possible to use GSAP for animating simple page transitions in React? I have my index.js file rendering my app: // React Common Modules import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import Reducer f
  10. Hi, i am just getting to know gsap and i have a little problem :/. I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out. const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const menuBtn = useRef(null) const tl = useRef() const toggleOpen = () => { setIsOpen(!isOpen) } useEffect(() => { const nav = menuRef.current
  11. Hello, I have made replica of my code to show the issue that I am having. https://codesandbox.io/s/strange-firefly-5mtce?file=/src/App.js Do not mind the mask not being in the center for that is not the problem.. When resizing the window from desktop TO mobile, the `<a>TESTING</a>` does not appear. when i inspect it with the dev tools it shows `opacity: 0;` I am trying to disable all scrollTriggers and timelines when mobile. Any help would be gladly appreciated. THANKS
  12. Hi guys, I am currently rebuilding my website and i am asking myself what is the bestway to share one timeline through multiple components ? let's say i have this architecture --Layout ----Header ----Component1 --------Component2 --------Component3 ----Footer And i want part of my header timeline starting after the one executed in component3 ? Currently i am using context but it feels a bit strange to me Provider.js const [globalTimeline, setGlobalTimeline] = useState( gsap.timeline({ paused: true
  13. I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider
  14. When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working. Firstly I thought it's Gatsby issue but the same thing happens for pure React. Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect. But when you move them to other components then all animations stop working. Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts
  15. I need to be able to get the position of the box or a way to know where the box moved and update the state. onDragEnd I can't pass the this.x for some reason, not sure if I'm missing anything. Here is the Demo: https://codesandbox.io/s/stoic-wood-zuyel?file=/src/Box.jsx
  16. I'm trying to make this codepen example into React. But unable to do it with new version of Gsap and also new to GreenSock's animation. Here is the current React example in sandbox: https://codesandbox.io/s/cool-forest-ddzft?file=/src/drag.js
  17. Am getting a issue here return ( <Box display='flex' flexDirection='column' > <Box display='flex'> <Button onClick={() => { lstore.open = !lstore.open; const domNode = lstore.collabeRef.current; const h = lstore.open ? domNode.scrollHeight : 0; if (lstore.open) { // if proceed opening gsap.to(domNode, 0.3, { height: h, opacity: 1 }) .eventCallback('onComplete', () => { domNode.style.height = '100%'; }); } else { // here the issue, if node have with 100% , animations not work
  18. I'm trying to use Draggable with React and I don't seem to make it work. Currently I have this code and the version of react: "dependencies": { "gsap": "^3.5.1", "react": "^16.8.1", "react-dom": "^16.8.1", "react-gsap": "^2.2.1", } Update: Here is the link to code: https://codesandbox.io/s/gallant-morning-2ggfm
  19. Hello. I've got a drawer navbar in my app which mounts/unmounts - slides in/slides out on toggle. On laptop it's at the left of the window, and on smaller devices it's at the top. Depending on the window size I need to animate the drawer navbar and its content a bit differently (like width on laptop, and height on tablet and phone). I need to achieve that on window resize. I tried to solve that with a custom hook which returns size.width (this hook works fine). I passed size.width as a dependency to useEffect() as shown below. But it's not working. On resize the drawer
  20. Hi everyone, I've successfully built with GSAP and Gatsby before, but not with the DrawSVGPlugin. It's throwing this error: This seems to be a Gatsby build problem as it works fine with React. Any ideas? Any suggestions would be hugely appreciated. I've referenced the plugins like so: const gsapPlugins = [DrawSVG, CSSPlugin, TweenLite] Thanks, Matt
  21. Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple
  22. Recently, I created gatsby project and I wanted to implement show animation to a card component. The problem comes when my 'react-intersection-observer' detects when a card appears on a screen. Then gsap gives me warning with content: 'Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()' instead of animating my card component. I've already read many topics about this issue. I've tried to use 'gsap.registerPlugin()' function or to put 'CSSPlugin' to 'const plugins' but they don't solve the issue. I see the same issue when I use properties like: 'opacity' ins
  23. Hi, I am trying to store a timeline to the useState hook in react, so that I use the state variable to control the timeline. I have been able to get this to work easily with React class Components, via storing a timeline to the state, but it is not working in useState for some reason. Does anyone know what I am doing wrong here? Thank you for any pointers! In my code example, onClick events on buttons are doing things that other events might do, just so it keeps it simple. Desired behavior: 1. Click first button, and it stores an array of cl
  24. I'm looking for a developer to be able to convert this exact slider to React. – https://codepen.io/jeffdfarr/pen/qBOzVwb?editors=1010 Here's what I'm looking for it to do... Auto scroll Ability to be draggable Infinite loop Ideally I'm looking to have this done in a 1-2 weeks.
  25. Hi. I'm quite new to GSAP and Gatsby (first time using gatsby and second time with GSAP), GSAP is quite buggy with me. Sometimes animations trigger, sometimes not. I followed the NPM usage guide you put on this site, except this step, which might or might not be the problem but I want to exhaust all options before I ask for further help: I'm sorry if this is not GSAP specific. I just want to understand the above code segment so I can know how to translate it properly in Gatsby's config. Transpilers, Bundlers, Webpack, Babel still confuse the heck out of me since I'