Search the Community

Hi Everyone, Its a paid task, I need this on urgent bases probably till tomorrow, I want two animations in my Reactjs projject. One is Blue Hero Banner that give waves effect and ripple wave effect on mouse interaction. Reference example https://www.chooseplasticfreewipes.com/ Second animation is 3D Text Slider example that change it text onscroll. I am rferening WHAT, HOW, WHERE section, Only need text slider animation. Reference Example https://immersive.altitude101.com/ Whatsapp me for more details. Best of Luck

Background While following a video of JsMastery, I was introduced to the website of Zentry. I was not willing to go with the clipPath of polygon but trying to animate the dynamic paths that morphs the path of div with scroll trigger as implemented in the website. I am aware of that i haven't used the plugin of morphsvg as when is was using clipPath polygon it was working. Problem STMT I found that they were dynamically adjusting the clip path based on the screen width. I took 2 steps in which the shape of the div container changes. For the hero section ( section with the video playback ) the initial path as somewhat of the equation. Step 1 - M ${w} -3 L ${w} -3 Q ${w + 8} -3 ${w + 8} 5 L ${w + 8} 854.422 Q ${w + 8} 862.422 ${w} 862.422 L 5 862.422 Q -3 862.422 -3 854.422 L -3 5 Q -3 -3 5 -3 Z Step 2 - M ${0.931 * w - 34.3} 185.647 L ${0.931 * w - 34.3} 185.647 Q ${0.947 * w - 32.8} 186.339 ${0.95 * w - 28.9} 194.137 L ${0.99 * w + 2.2} 786.123 Q ${0.993 * w + 4.0} 793.92 ${0.986 * w + 2.0} 794.063 L ${-0.996 * w + 462.0} 819.577 Q ${-1.0 * w + 460.0} 819.72 ${-0.994 * w + 450.6} 812.027 L ${1.286 * w - 432.0} 98.3966 Q ${1.291 * w - 435.0} 90.7035 ${1.297 * w - 438.5} 91.3961 Z There might be other path equations but currently i am overloaded with 2. Solutions I Tried Try 1 - I tried to add a custom hook named useResponsivePath which has a useEffect hook which contains resize eventListener attached to window and when called return 2 paths based on that specific width { initial, final } const clipPathD = useResponsivePath() useGSAP(() => { gsap.set("#video-frame", { clipPath: `path('${clipPathD.initial}')`, }); gsap .timeline({ scrollTrigger: { trigger: "#video-frame", start: "center center", end: "bottom center", scrub: true, }, defaults: { ease: "power1.inOut" }, }) .to("#video-frame", { clipPath: `path('${clipPathD.initial}')`, }); }); Try 2 - Since the previous approach did nothing i tried to integrate the path to an svg element useGSAP(() => { gsap.set("#clipPathShape", { attr: { d: paths.initial } }); gsap.timeline({ scrollTrigger: { trigger: "#video-frame", start: "center center", end: "bottom center", scrub: true, }, defaults: { ease: "power1.inOut" }, }) .to("#clipPathShape", { attr: { d: paths.middle } }); }); And for the svg <svg width="0" height="0"> <clipPath id="dynamicClip" clipPathUnits="objectBoundingBox"> <path id="clipPathShape" d="[original path i.e. the step 1]" /> </clipPath> </svg> <div id="video-frame" style={{ clipPath: "url(#dynamicClip)", WebkitClipPath: "url(#dynamicClip)" }} > { Rest of code } </div> Any Help is much Appreciated. Thank You

I was trying to convert this codepen into react but things are not going very good. import { useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import "./split-scroll.less"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(ScrollTrigger); const ScrollSections = () => { const containerRef = useRef(null); const rightSectionRef = useRef(null); useGSAP(() => { function goToSection(section, st) { gsap.to(containerRef.current, { scrollTo: { y: section.offsetTop, autoKill: false, }, overwrite: true, duration: 1, onUpdate: () => setRightScroll(st.scroll() * 2), }); } const setRightScroll = gsap.quickSetter(rightSectionRef.current, "y", "px"); gsap.utils.toArray(".left-section .box").forEach((section) => { ScrollTrigger.create({ trigger: section, onEnter: (self) => goToSection(section, self), }); ScrollTrigger.create({ trigger: section, start: "bottom bottom", onEnterBack: (self) => goToSection(section, self), }); }); }); return ( <div className="sections-container" ref={containerRef}> <div className="left-section"> <div className="box box1"></div> <div className="box box3"></div> <div className="box box5"></div> </div> <div className="right-section" ref={rightSectionRef}> <div className="box box6"></div> <div className="box box4"></div> <div className="box box2"></div> </div> </div> ); }; export default ScrollSections;

Hi I want to create a Flip from the header to a new page like this website But when I click it don't append the child to the container I can't access to codepen in my country So I have created a stackblitz page instead

We seek a talented GSAP expert to join our team on a 1-month full-time contract. The ideal candidate will develop and maintain a 🎨 Design Editor Tool 🛠️ with complex animations using GSAP in ReactJS applications. 👀 Please note 👀 we require experience and a solid understanding of Canvas and creating Canvas-based animations. Responsibilities: • Develop and maintain animations in ReactJS applications using GSAP. • Collaborate with the design team to create visually stunning and responsive animations. • Optimize animations for performance across devices and browsers. • Integrate and synchronize audio and video elements within the application. • Create interactive and engaging user interfaces with Canvas animations. • Troubleshoot and resolve animation-related issues. • Research and develop new animations based on the core GSAP library. Requirements: • Proven experience as a GSAP ReactJS Developer. • Strong proficiency in ReactJS and TypeScript. • Extensive experience with GSAP and complex animations. • Solid understanding of Canvas and creating Canvas-based animations. • Experience with integrating audio and video elements in web applications. • Strong knowledge of HTML5, CSS3, and responsive design principles. • Excellent problem-solving skills and attention to detail. • Strong communication skills and team collaboration.

Hi everyone, I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically. CodePen Example : Horizontal Scroll Example StackBlitz Project : Pin Left Section and Scroll Right

Hi, I would like to know how to play to specific points in the timeline using labels example code using only Javascript provided by Snorkl.tv https://codepen.io/snorkltv/pen/vYOOgBQ but when i tried to do the same thing using React is not working as expected, code : https://stackblitz.com/edit/stackblitz-starters-wuzvf4?file=app%2Fdynamic-timeline.tsx

Hello everyone, I want to make some animations just like here: https://gsap.com/community/forums/topic/32504-loop-through-an-array-of-text-and-display-on-screen/?do=findComment&comment=175412&_rid=151858 but using Svg components. I basicaly want to switch between svg components instead of texts. My current work is here: https://stackblitz.com/edit/stackblitz-starters-egrwn8?file=components%2FLogo%2Findex.tsx Any help really appreciated!

Hello I want to know if I can divide the screen size on 100 circle with different size please like this website bubbles also I try to use @nivo/circle-packing to get the radius after packing them but I cannot so how to get it please

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.

Hello, I hope everyone is well! I'm trying to make an animation where the element goes to position y=95 then waits 3 seconds and returns to position 0 and repeats the animation several times, but I'm not succeeding. I would like guidance to understand what I am doing wrong. Thank you very much in advance. https://codepen.io/daniel-silva-dxp/pen/VwNaZWg

I'm facing a problem with animate html inside foreignObject. when I click the button it animates. it works normally on desktop and Android devices and is debug responsive with iPhone on the Chrome dev tool. but when I'm testing in a real iPhone. it causing problems. the text and jumping big above the SVG and this is not i want. how can i fix it ? Please help me. this is the demo in codesandbox: animate html ìn foreignObject - CodeSandbox

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU

Hey Greensock! I was just wondering if I could get some assistance on my project. I want to create animation letter that appear one by one when scrolling, right now this is my progress https://stackblitz.com/edit/react-xogadh?file=src%2FApp.js I kinda hope when user scroll to the second section they have to scroll one by one/slowly to make the all letters appears. I've tried using pin and adding values "end" more but it makes section after them got pushed down and it some breakpoints it make the animation section got scrolled too. is this the right way to achieve it? Thank you for any help. Sorry for my english

Hi there! We just completed a major site redesign featuring ScrollTrigger in several modules. It's been awesome, thanks to all involved in making this happen! One issue that came up is illustrated in the Codepen. We have a few modules that "expand" with interaction, like the green Module 2. The horizontal scroll module works great, but if the module above is expanded, it throws off the start/end positions of the trigger. My initial solution was to add a resizeObserver on the height of the body, that would trigger a window.resize event. This was effective in conjunction with MatchMedia, but it's global and is interrupting other animations that are happening on-screen while the body size is changing. What's the best (and more "componentized" ) way to recalculate the trigger when its position changes like that? Note: I don't think it's necessarily relevant, but we are using React in a sort of unique set up... we are working within a modular CMS, so each module is its own React app, similar to how the Codepen is set up. Much thanks!

I'm new to GreenSock and I encountered a rather confusing error when using scroll triggers with reactjs. Same JSX code but I get two different results on Codeandbox and on vscode, I'm not sure if this is a bug on my dev environment so here is the video I recorded the error: https://streamable.com/m0kvca here is my code on Codeandbox, everything is very similar and there is no difference but the result is different: :Codeandbox link here is my code in app.js file import React, { useEffect, useState, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function App() { const menuRef = useRef(null); const leftRef = useRef(null); useEffect(() => { (async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); })(); }, []); useEffect(() => { const menuElement = menuRef.current; const leftElement = leftRef.current; if (menuElement && leftElement) { ScrollTrigger.create({ trigger: menuElement, start: "top top", end: "bottom bottom", pin: leftElement, markers: true, }); ScrollTrigger.refresh(); } }, []); return ( <div> <div style={{ height: "50vh" }}></div> <div> <div ref={menuRef} style={{ display: "flex", border: "2px", borderStyle: "solid", gap: "20px", }} > <div ref={leftRef} style={{ width: "30%", height: "50vh", backgroundColor: "#ff0" }} > <div style={{ padding: "20px" }}>1</div> <div style={{ padding: "20px" }}>2</div> <div style={{ padding: "20px" }}>3</div> <div style={{ padding: "20px" }}>4</div> <div style={{ padding: "20px" }}>5</div> </div> <div style={{ width: "70%" }}> <div style={{ height: "50vh", background: "#ddd" }}></div> <div style={{ height: "50vh", background: "#ff0" }}></div> <div style={{ height: "50vh", background: "#0ff" }}></div> <div style={{ height: "50vh", background: "#0f0" }}></div> <div style={{ height: "50vh", background: "#333" }}></div> </div> </div> </div> <div style={{ height: "50vh", background: "#333" }}>1</div> <div style={{ height: "50vh", background: "#555" }}>2</div> <div style={{ height: "50vh", background: "#777" }}>3</div> <div style={{ height: "50vh", background: "#999" }}>4</div> </div> ); } export default App; làm ơn giúp tôi

Hi team In the attached code-pen link, div with class 'container' has a div with class 'wrapper' (bad name for a slider) with 6 sections (section tags). I've defined a GSAP timeline and stored it in a variable. I am referencing this timeline using useRef to use it. This timeline has a tween on sections and it animates them on the Xpercent All of this is scroll based using a Scroll-trigger with a scrub. The timeline is set to paused The things that I don't understand are 1. why is the progress of timeline always equal to 0? Is it because scrub is true? 2. How do I control timeline, like start, pause, reset, reverse, if the tweens are scroll based? 3. How do I control timeline in react? 4. What is the optimal way of updating react components that are based on a timeline's/tween's progress (eg. the progress bar) Currently, i am updating the progress bar based on the progress of scroll trigger, when I add a state variable and use it as a dependency in the useEffect and try to update it to comply with react, it doesn't work. What is the underlying issue? NOTE: I am animating the xPercent because I was further animating the scale of sections based on their position with respect to the viewport using container animations but that is too far fetched. Please help me understand

Hi, I have some trouble with my Observer. I used it to snap between 2 sections. I have a state for the open menu is isOpenedMenu and pass it to the navbar as props. But when I click many times it causes an error with the Observer. I'm going crazy over this because when stated in the navbar component it works normally. What's wrong with the Observer? Here is my codesanbox: Maximum call stack size exceeded by observer - CodeSandbox Please support me, Thank you so much

Hi everyone, I have some trouble with my project. I'm trying to mix Observer and Scrolltrigger. I have a body with overflow: hidden to disable the native scroll of HTML. I am using a manual scroll with a Scrolltrigger. But I'm facing a problem when it becomes the manual scroll. It doesn't run onEnter and onEnterBack then using Observer to snap back. How can I make onEnter and onEnterBack run while keeping overflow: hidden in the body and the manual scroll?

Hello everyone, I have a React app with a number animation that activates when we scroll down. The animation works fine with regular scrolling. However, when I click an Anchor tag <a href="#section"> to jump-scroll to a section below, the animation doesn't play. Even after scrolling up and down again, the animation still doesn't work. I need some guidance on how to fix this issue. Link to sandbox: https://codesandbox.io/s/gsap-animation-issue-k3g7yl?file=/src/App.js Note: also, can someone tell me how to embed codesandbox in my form?

I am trying to create two subsequent animations on the cube in react-three-fiber. But I want to run the second animation(animateY) after I finish the first animation(animate) and that's why I am using onComplete function for the same. But I am getting the desired results as both animations run simultaneously. I have shared the relevant code and output for the issue. _med.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

Hello Team, Following code pen has click event anywhere on page, 1. Could you please assist me in transforming jquery to equivalent result using gsap. 2. Also please suggest how to achieve same result if by clicking any 5 menu items that animates radial clip path entire page by originating from any one menu item. ( Example: Clicking any navigation item from website: https://www.choreograph.com/ ) Regards Prad.

Hello everyone, I need your help to code this scroll logic : change one pinning element allowed active state by scroll. When I scroll, state changes and updates image in both sides allowed. By details, when I scroll down, the element below will be active and drag to change the corresponding image to the right, otherwise when scrolling up, the upper element will be active and drag to change the image, when clicked on any element on the left, the image will also be changed according to the active element (similar to scroll), and if the first element is active, we will be able to scroll to the top of this section. This is sample link : Ngân hàng di động MyVIB 2.0| VIB I want to use scrollmagic or maybe gsap or intersection observer, thank you.

Hello, I just can’t figure out how to set up a smooth sliding of the title (targetTitle) and colored blocks (targetImg, targetImg2). When scrolling through the page, they move very quickly. I've experimented with the duration parameter, but it doesn't give any results. I tried to add ScrollSmoother, the page began to scroll smoothly, but this did not affect the block (target). I don't understand what I'm doing wrong. And for some reason, the marker end: 'bottom bottom' does not reach the bottom of the block (target). Can someone explain why this is happening and how to add smoothness to the elements?