Jump to content
GreenSock

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

Search the Community

Showing results for tags 'react.js'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 7 results

  1. We have a react application that makes heavy use of GSAP & Scrolltrigger which is showing some inconsistent behavior and we need to fix it within a short timeframe. Payment is project-based with clear set of tasks -- the priority is for the Scrolltrigger issues, although it would be great to get assistance more generally. We have no idea how long this will take, we do have a project budget, so please give us a flat bid for just fixing the Scrolltrigger/React issue or for general help. We can also share the code with you, nothing fancy, if that is helpful before you determine your bid. Thanks! A very similar site: https://astraeafoundation.org/microsites/ar2019/ Our site in progress: http://tappingbones.works/icfj/Background:Our application consists of react components to apply various animation effects to content, trigger animations, etc, each component containing it's own triggering logic, and used multiple times throughout the project. Unfortunately their triggers don't appear where they should. We've refined this substantially, but have a few last details to fix for responsiveness, on window resize, and perhaps other needs to reset the animations. Could be a memory allocation issue? How the triggers are instantiated in react appears to be the solution with resetting or killing the instances of the trigger at the right points in the react lifecycle. We have a Tuesday demo of this (48 hours from now) and then need to deliver a week later. This site will have a wide audience, so it would be good for someone with solid experience shipping these sorts of animated websites to give it a once over to tighten the timing, optimize performance etc. Beyond this project, we will have similar needs in the future and will be looking for a goto developer for these kinds of frontend consulting projects as well as specific functionalities, plugins etc.Technology used in this project:ReactGsap 3ScrolltriggerGatsbyEmotionbodymovinreact-lottiegatsby image
  2. 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? Thank you guys so much for all your help now and in the past! Here is my CodeSandbox
  3. Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?
  4. Hi there, TL;DR How to prevent the gsap animations to be aborted in react because of a rerender/prop change How to use dynamic props/state inside a gsap tween without beeing interrupted I'm building a spinng wheel with dynamic start- and end-points. You guys already helped me a lot with this: Now I need to implement this into an acutal react application. The biggest problem is, that I use dynamic Properties inside my gsap tweens to calculate e.g. the stop position or when to stop animation. React rerenders my component and aborts the whole animation as soon as a property changes. Of course react should do that - but how to I keep my animation running? What my code should do: start spinning by clicking the "Start Spinning" Button Wheel is spinning infinite Stop wheel by clicking the "Stop Spinning" Button Wheel at least the minimum amount (5) and then stops at the set position What my code actually does: start spinning by clicking the "Start Spinning" Button Wheel is spinning infinite Clicking "Stop Spinning" does not work -> triggers in my local invironment a rerender and aborts the animation in codepen it flickers and then nothing happens (the stop position is never passed into the tween) ... In the codepen it actually does not rerender but the updated prop won't be passed into the tween. const loopAnim = gsap.to(circleRef.current, { rotation: "+=360", ease: "none", duration: 0.5, onComplete: () => { // The props won't update in here... if (loopIteration.current >= fullSpins && typeof stopAt === "number") { stopAnim.play(); } else { loopIteration.current++; loopAnim.play(0); }, paused: true });
  5. Hello! React + GSAP tutorials are pretty rare (imho), but I just stumbled on this channel. The videos are concise and the creator explains everything well. Hope this is helpful https://www.youtube.com/channel/UCqrxiLP9RHz2GxDJaZuTRBw/videos Blessings, Yeti
  6. I'm fairly new to React and fresher with Greensock aminations. Want to achieve vertical scroll effect like https://plasticbcn.com but stuck in middle of transition. please guide or provide some code snippets that include react + gsap scroll animation.
  7. I've done a great deal of looking around... I could be off, but there seems to be a lack of authority on best practices for GSAP and react. There once was a 'gsap-enhancer' (no longer supported) that enabled jQuery-like targeting of dom nodes and their children. Syntax was easy. From looking around on the interwebs-- FindDOMnode() was once recommended for targeting... & then "ref='' " attrs (with it's callback feature--which is a bit above my paygrade to understand at the moment I'm frankly, beginning to feel a bit discouraged from using GSAP in react altogether because there is such a broad spectrum of misinformation out there. https://medium.com/@marcmintel/react-meets-gsap-c6dd82edeb72 In the comments, the author says "use refs!" but publishes code examples using findDOM node() ?... It's endlessly frustrating for people to learn about this incredibly powerful, wonderful library. If only a tutorial were available with a simple example of iterating over some list-items using best practices... it would be a big help to a huge number of people. There are a few similar unanswered questions on stack overflow re GSAP and react as well... Clearly there is a gap to fill... ---That said, if anyone could point me in the right direction, I'll write the article myself for noobs like me who remain "out of the loop" P.S. For reference, I did this thing without realizing what a "breach" of best practices it is. I would so like to improve it so that I can learn about using GSAP and react properly. Anyway... Best wishes & many thanks in advance to whoever could point me in the right direction. Cheers, Beau
×