Search the Community
Showing results for tags 'react.js'.
Found 14 results
-
Hello, I have a couple of questions and one dead end that I can't seem to solve. I am attempting to create an ellipse carousel, essentially similar to this one made in a circle: https://codepen.io/GreenSock/pen/GRMqWvW My main issue lies in the fact that I'm attempting to move objects along the path using the progress parameter, and I don't know how to achieve this functionality. I have tried to add animation to the timeline, but currently, it isn't moving even with the basic rotation for the div, which acts as a wrapper. I've added numerous console.log statements to track progress changes, and they seem to be updating correctly. The relevant code for inspection is from line 65 to 177, with some comments interspersed. From the side problems I'm also struggling to track the active element using animation added to the timeline, similar to the example provided by GSAP example pin (lines 83-97, currently commented out). Currently, I am changing this value within the 'moveWheel' function at line 162. Here's StackBlitz link for the above questions: https://stackblitz.com/edit/stackblitz-starters-4p7twq?file=src%2Fcomponents%2FroundComponent.js Another issue I need assistance with is the 'convertToPath' function. I am attempting to obtain a path from an ellipse, but when I position the SVG beforehand (for example, by centering it using cx and cy values), obtaining the path doesn't reflect this position. Additionally, if I try to directly add a translate into the generated path, it doesn't work. How can I accomplish this correctly? I have provided separate code to visualize this problem: https://stackblitz.com/edit/stackblitz-starters-6mzrk4?file=src%2FApp.js P.S. Regarding the issue with converting the ellipse to a path, I've noticed that if I comment out line 57 within my code, it looks as it should, but now the entire path isn't visible 😕. I've saved the StackBlitz project with a comment on that line. Perhaps you could provide me as I think with some simple solution to get a whole path of svg visible? Thanks in advance.
-
I'm new to GSAP and try to use it with Next.js (React.js). I understand Tween and Timeline, but still can't get my head around Flip. I want to make Grid item view just like the example, but with useGSAP in React. I still can't make it flip. Is there any similar example I can follow?
-
Hey! I want the behavior to be similar to the one in the video. I use the onComplete method to understand when the circle has increased and horizontal scrolling should work for me. Since mine is a circle shape, I think it would be correct to hide the circle shape and display a container with the same color. In this container, set the width of the first child to 100% and the width of the other to 50%. As you scroll, reduce the width of the first child element to 50%. How to do this correctly? I don't quite understand how to do this correctly. Tell me, how can I catch the middle of the animation in order to display the text? For example, the circle enlarged a little and the text was gradually displayed; for example, you can also see it in the video. It is also not clear to me how to determine the start and end in this code to trigger the horizontal scroll. I specified start and end, but I think that's wrong for what I need. I would like to get a comment on how to create a similar sequence for animation. I believe that it will be enough for me to suggest how to correctly implement horizontal behavior after performing an animation with a circle and simply display the container and I will try to understand how to further connect this chain and I will independently try to change the width for the next animations, and I would also like to get an answer, How can you correctly display text there in the middle of the circle enlargement animation? 2023-10-18 23-59-29.mp4 -
On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning -
Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js
-
How can we implement reactjs website animation with videos on scroll? On scroll, videos can be played continuously in a screen. The exact example is like below: https://staratlas.com/ Thank you.
-
I put an <a> tag for project on the navbar, as I click "project" it will scroll me to the section by its id. I wonder if this function conflicts with scrolltrigger function causing the issue or not. I have a few React components on the top of this project component. import "./Project.scss" import ProjectList from "./ProjectList/ProjectList" import { projectdata } from "./ProjectData.js" import { useEffect, useRef } from "react"; import { gsap } from "gsap/all"; import { ScrollTrigger } from "gsap/ScrollTrigger" export default function Project() { gsap.registerPlugin(ScrollTrigger); const listRef = useRef(null); useEffect(() => { gsap.fromTo(listRef.current, { y: "100%", opacity: 0 }, { y: "0%", opacity: 1, duration: 2, scrollTrigger: { trigger: listRef.current, markers: true, }, }); }) return ( <div className='project' id='project'> <h1>Project</h1> <ul> {projectdata.map((project, index) => ( <ProjectList {...project} key={index} ref={listRef} /> ))} </ul> </div> ) }
-
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 -
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
-
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?
-
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 });
-
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
-
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.
-
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
