Jump to content
Search Community

Search the Community

Showing results for tags 'react'.

  • 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 242 results

  1. The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }
  2. There are two components: The first component uses pin, where the pin-spacing height equals the height of this element +=200%. The second component uses start for its trigger and gsap.from animation. When initializing the pin from the first component, it is given a new height, but the start/end positions of the second component are unaware of this, causing them to execute earlier. This is the main issue, and I couldn't find the correct solution to fix it. I created a minimal example, but for some reason, it doesn't work there 🤔
  3. So I have created a component transition animation which works perfectly fine on local machine but when i deploy the website on vercel, the animation is very slow. Is there some way to optimize the animation? import React,{useEffect}from 'react' import { useNavigate } from 'react-router-dom'; import { locationBg } from '../../assets' import useLocationContext from '../../hooks/useLocationContext'; import { gsap } from 'gsap'; import MobileFrame from './MobileFrame'; const Location = () => { const navigate = useNavigate(); // Destructing variables from the Location Context const { data,setData, setHasSearched, setInputValue, setSelectedCountry } = useLocationContext(); useEffect(() => { const tl = gsap.timeline(); // Animate the Location component tl.fromTo('.LocationAnimationClass', { opacity: 50, y: 1200 }, // From { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } // To ); // Animate the MobileFrame component tl.fromTo('.MobileFrameClass', { x: '-600%', opacity: 20 }, { x: '0%', opacity: 1, duration: 1.8, ease: 'bounce.out' }, '+=0.2' ); tl.fromTo('.ButtonAnimationClass', { y: '400%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1, ease: 'bounce.out' }, '+=0.2' ); }, []); // This useEffect is used for handling error on the location page useEffect(() => { if (!data) { navigate('/'); } return () => { setHasSearched(false); }; }, [data, navigate, setHasSearched]); // This function is handling the reset Button const handleReset = () => { setData(null) setSelectedCountry(null) setInputValue(null); navigate('/'); } return ( <> <div className='LocationAnimationClass overflow-hidden relative h-screen flex flex-col gap-[30px] md:gap-[40px] xl:gap-[20px] 2xl:gap-[90px] justify-center items-center bg-cover bg-center' style={{backgroundImage: `url(${locationBg})`}}> <div className='bg-black w-full h-full bg-opacity-30 absolute top-0 left-0'></div> <div className='MobileFrameClass'> <MobileFrame/> </div> <button className="ButtonAnimationClass bg-[#33c2cc] px-10 py-3 rounded-full font-noto-sans font-semibold text-3xl z-10 text-white" onClick={handleReset} > Reset </button> </div> </> ) } export default Location
  4. I've created a custom cursor whose X and Y gets updated on change of mouse. Using React and GSAP. The cursor also changes in size when it is hovered on a specific text. However, the hover state is not consistent and glitches at the time of using it. I'm sharing the codesandbox link where the same problem is replicated. Any and every help is appreciated, thank you. Codesandbox Link: Link
  5. Hello All I'm trying to make and endless loop with two rows going in opposite directions. The first row works fine, but the second row has a bug where there is a gap of unrendered elements after Infatuation. Any ideas on what's going on? Code is Below (Apologies, but I have issues making react Code Pens): https://codesandbox.io/s/test-carousel-forked-s5wtub
  6. Hi there! I'm trying to replicate an effect in my snapping scroll, when I scroll up or down there is some kind of stop before the other section apears, and I want with a simple scroll go to the next section. I found a gsap code doing that exactly behaviour that I want but it is using scrollTo and gsap.to, and my code is already different, is there a way to replicate that in my code with the code that I already have? Because I have an "overlaping" effect with "pin: true" that I don't want to lose. https://codepen.io/akapowl/pen/YzxoEab/e9015efd3d44b24f9cce5bef29dee1dd My expected snap behaviour: https://codepen.io/urbgimtam/pen/XWXdypQ My snap behaviour: Thank you! Have a good day.
  7. 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
  8. Hi there! I need some help from you guys. I'm trying to apply the effect in the codepen demo, I have two sections (that contains each one a carousel) and I want the second section cover the first section on scroll (same funcionality as the demo but only with these two sections). I'm writing the scroll trigger code in the first carousel component (don't know if this is the right approach), the problem is that when I try to use the "pin: true" property, my first carousel dissapears or moves to the bottom of my app. I don't have a codepen because I'm using React but I made a codesandbox example in this link: CodeSandbox Link Thank you so much!!
  9. Hi everyone, I trying to create animation for text using React (https://stackblitz.com/edit/gsap-react-basic-f48716-nr918g?file=src%2FApp.js,src%2FAbout.jsx,src%2Fstyle.css) (I paste these elements as a children in parent element). I wanted to change opacity from 0 to 1 by scrollTrigger, but only first element works fine when other start to jump or even dont work. Its works great without react, but got problem with Thanks for help)
  10. Hello, I'm struggling to solve a problem with a verticalLoop animation on columns in my web layout. Any suggestions or code would be appreciated. Here's the demo: https://stackblitz.com/edit/gsap-react-basic-f48716-cphkak?file=src%2FApp.tsx I want to apply the verticalLoop animation to the columns. There are usually two columns, but sometimes it appears as one column due to window size. I've adjusted the layout using flex-wrap-reverse in tailwindCSS. The issue is that the animation doesn't work correctly after resizing the window. Specifically, I want two verticalLoop animations for each column when they are side by side, and one verticalLoop animation when they appear as a single column due to the flex-wrap CSS property. To handle this, I've created an isFlexWrapped state to conditionally run the animations. I also have a getIsFlexWrap function to detect the column layout on window resize. However, after resizing, the animation doesn't work as expected. The intended animation behavior is as follows: - When there are two columns, the first column's animation speed is 1, and the second column's animation speed is 0.9. - When there's one column, the animation speed for the entire column is 1. - During window resizing, the animation should either pause or reset to the first position (progress 0). - After resizing the window and the column layout changes (from 2 to 1 or 1 to 2 columns), the appropriate animation should run. I'm not sure what I'm missing or if I've used the verticalLoop animation or the useLayoutEffect hook incorrectly. Any hints or guidance would be greatly appreciated. Thank you for your assistance.
  11. First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!
  12. Hi all! I am running in a problem with this animation (Stackbliz), an infinite looping horizontal section with a snapping functionality (which is causing the problem). The animation looks working properly, but as soon as I change page (by clicking in one of the images) I run into a scroll issue. When I am in the new page, if I scroll for a bit and then stop scrolling, the page get scrolled to the top. The issue is inside this part of code. Looks like this function is running even when the component is not rendered anymore: ScrollTrigger.refresh() ScrollTrigger.addEventListener("scrollEnd", () => scrollToOffset(scrub.vars.offset)); function scrollToOffset(offset) { let snappedTime = snapTime(offset), progress = (snappedTime - seamlessLoop.duration() * iteration) / seamlessLoop.duration(), scroll = progressToScroll(progress); if (progress >= 1 || progress < 0) { return wrap(Math.floor(progress), scroll); } trigger.scroll(scroll); } Can be that gsap.context is not able to cleanup properly this part of code? I am cleaning up like this: return () => { ctx.revert(); ScrollTrigger.getAll().forEach(t => t.kill()); } Thanks in advance!
  13. Hi there. I am trying to create a bottomsheet. As you guys can see, there is a scrollable div element inside draggable element. If scrollTop is 0 then the element should be dragged toward bottom side when users drag or touch down. If scrollTop is more than 0 then it should scroll and should not be dragged. But the problem is that I cannot solve this issue. I searched about this issue and i got the hint that I should use allowEvnetDefault option to fix this issue. And I tried to solve this issue but i can't. How can I fix this issue?
  14. Hello ! I'm aware this is probably an easily fixable mistake, but I'm still very new to web development, especially using gsap. Basically I have a navbar that I want to open and close with onClick() on the same button in React. I tried following multiples tutorials and forum posts, but I am still struggling to make it work like I want it to. I'd appreciate any help, tips or answers. Thank you in advance for your time ! (I also don't really use codepen but I am more than willing to try and use it, if it's of use for you) function Navbar() { const [navbarIsOpen, setNavbarIsOpen] = useState(false); function NavbarAnimate() { const tl = gsap.timeline({ reversed: navbarIsOpen, }) tl.fromTo(".navbar-link", { x:-400, opacity:0 },{ x:0, opacity:1, stagger:-0.02 }) tl.fromTo("#navbar", { backgroundColor: "rgb(12, 17, 23, 0.0)" },{ backgroundColor: "rgb(12, 17, 23, 0.8)" }) tl.reversed() ? tl.play() : tl.reverse() } And here is the onClick() I use on my button : <i className="..." onClick={() => { setNavbarIsOpen(!navbarIsOpen); NavbarAnimate(); }}/> Thank you again for taking the time to check out my problem, and sorry if this is a redundant and recurring mistake ! (Excuse my english as I'm not a native speaker)
  15. I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js
  16. I have two scrolltrigger based pins in separate React components, WorkContainer.jsx and SkillsWrapper.jsx. Both pieces of pinned content appear to jump positions on enter. The second pin, in SkillsWrapper, will also jump randomly on page refresh and will appear before or after it's pinned content section. I've tried to remove all padding/margin to the affected sections, added context, and added "anticipatePin" to both scrolltriggers but the issue persists. See useEffect for WorkContainer: useEffect(() => { let ctx = gsap.context(() => { // Pin featured work text ScrollTrigger.create({ trigger: '#featured-work-text', start: 'top top', end: 'bottom 60px', pin: true, // markers: true, anticipatePin: 1, }); const videos = gsap.utils.toArray('video'); videos.forEach(function (video) { ScrollTrigger.create({ trigger: video, // scroller: ".appVideos", start: 'top 65%', end: 'bottom 0', // markers: true, onEnter: () => video.play(), onEnterBack: () => video.play(), onLeave: () => video.pause(), onLeaveBack: () => video.pause(), }); }); }, component); // <- selector scoping return () => ctx.revert(); }, []); See useEffect for SkillsWrapper: useEffect(() => { let ctx = gsap.context(() => { let mm = gsap.matchMedia(); mm.add( { isDesktop: '(max-width: 768px)', isMobile: '(min-width: 768px)', }, (context) => { // eslint-disable-next-line no-unused-vars let isDesktop = context.isDesktop; // Sets Scrolltrigger pin for circle let tl = gsap.timeline({ scrollTrigger: { trigger: '#circle-container', start: 'top top', end: '+=100%', pin: isDesktop ? false : true, pinSpacing: false, toggleActions: 'play none none reverse', anticipatePin: 1, invalidateOnRefresh: true, // markers: true, }, }); // ... additional commented out tl } ); }, component); // <- selector scoping return () => ctx.revert(); }, []); Please see attached video showing my issue and stackblitz links to project below: Stackblitz project editor Stackblitz application preview Any help with resolving this issue would be greatly appreciated. scrolltrigger-issues-small-2.mp4
  17. Hi I am having a problem using ScrollTrigger with React Router. I have two pages in my website Home and About. The animation on homepage works perfectly but when I navigate to About page I get this error. "Node.removeChild: The node to be removed is not a child of this node" If I visit About Page by direct url without using router then the Animation on About page works fine but If I navigate to Home page from About page then the same error happens again. I am new to Scrolltrigger and also react and I've been trying to solve this for days but I couldn't find any solution on the internet. That's why I posted here. Anyway below is the url to the StackBlitz code of my project. https://stackblitz.com/edit/stackblitz-starters-bldghh
  18. Hey! I'm Lucas. A full-stack developer that works with Next.js, the MERN stack (MongoDB, Express.js, React, and Node.js), and, of course, GSAP! I have experience designing, developing, and shipping websites, apps, and solutions that reached some thousand users. From marketing campaign landing pages to proprietary e-commerce platforms. I am currently open to freelance projects as well as part-time and full-time positions. More details about me and some of my projects are available on my personal website: https://www.lucaslamonier.com/ If you're in need of some animations, full websites, web apps, or even some ideas, please do get in touch! My contact info is on the website and you can reach me by replying to this post or sending me a DM. I have no timezone restrictions. Thanks for reading!
  19. const drawImage = useCallback(() => { const image = images[defaultFrame.frame]; const canvas = document.querySelector("canvas") as HTMLCanvasElement; // window.innerWidth canvas.style.width = `${width}`; // window.innerHeight canvas.style.height = `${height}`; const context = canvas.getContext("2d") as CanvasRenderingContext2D; // window.innerWidth context.canvas.width = width; // window.innerHeight context.canvas.height = height; context.clearRect(0, 0, canvas.width, canvas.height); // Draw the image on the canvas //, width, height context.drawImage(image, 0, 0, canvas.width, canvas.height); }, [defaultFrame.frame, height, images, width]); const initGSAP = useCallback(() => { gsap.to(defaultFrame, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: true, pin: "canvas", }, onUpdate: drawImage, }); gsap.fromTo( ".game", { opacity: 0.1, }, { opacity: 1, scrollTrigger: { scrub: true, start: "0%", end: "100%", }, onComplete: () => { // do stuff }, } ); images[defaultFrame.frame].onload = drawImage; }, [defaultFrame, drawImage, images]); I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this? Here a video
  20. Hey all, What I'm trying to do: Use scrolltrigger to control the progress of the lottie file Use scroll trigger to fade in text blocks sequentially, then fade the text block up and out at defined times on the timeline What's happening: Even though I set the text to not be visible initially it still all appears. Can't properly link the animation of the lottie and text. Can't seem to get the text to fade out using stackblitz (but it fades out one by one locally ?) Any assistance greatly appreciated Minimal demo: https://stackblitz.com/edit/react-fra2qi?embed=1&file=src%2FApp.js
  21. As you can observe in the code pen link, both the instances get triggered on interacting with any one of them. What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this? I read gsap context, This gsap thread, and gsap with react basics But I am still confused.
  22. my animation lags on load , but doesn't when I go other pages and switch back to the home page
  23. This is how it looks on my localhost: 20230629-0604-06.4300693.mp4.168f158111a67ec4dbeac6b2db47861d (1).mp4 This is how it looks on my hosted version: Recording 2023-06-29 113710 (1).mp4 Any help why is it not working with vite tsx? I have another project in react jsx where this issue is not faced.
  24. I want this kind of effect in react : https://codepen.io/admireasia/pen/gOQmZmv . Wanted above pin effect in react but not working here : https://codesandbox.io/s/focused-blackwell-hkw5p6?file=/src/App.js I have created this codepen and its working fine but not in react (sandbox link above for reaact) but I am not able to understand where I am doing wrong to implement this kind of pin element for atleast 200% but I am getting redudant whitespaces event after using pinSpacing:false and I am also getting triggered element multiple times .when trigger start and end.
  25. useLayoutEffect(() => { const animationContext = gsap.context(() => { const timeline = gsap.timeline(); const timelineButtonOff = gsap.timeline(); timeline.to(".landingOverlay", { opacity: 1, zIndex: 1, duration: 0.1, paused: isButtonClicked, ease: "none" }); timeline.to(marqueeDummy, { duration: 0.3, opacity: 0.4, }); const loopDummy = horizontalLoop(marqueeDummy, { repeat: -1, speed: 0.3, reversed: true }); const loop = horizontalLoop(marquee, { repeat: -1, speed: 0.3 }); timeline.add(loopDummy, 0.1); timeline.add(loop, 0); timelineButtonOff.to(".menuCarousel", { x: '-' + distance, ease: "none", scrollTrigger: { trigger: ".landingScreen", toggleActions: "restart pause reverse reset", start: "center 45%", end: "+=3000", scrub: 0.1, pin: true, pinSpacing: true, }, onReverseComplete: () => { setIsButtonClicked(false); timeline.play(); console.log('timeline has restarted'); } }); if (!isButtonClicked) { timeline.play(); } else { timeline.kill(); timelineButtonOff.play(); } }); return () => { animationContext.revert(); }; }, [isButtonClicked]); <div className='landingOverlay position-absolute' onWheel={handleButtonClick}> {/* landingOverlay content */} <button className='d-block rippleButton' onClick={handleButtonClick}><FaAngleDown /></button> </div> <div ref={landingScreenRef} className="landingScreen"> <div className={`marquee position-relative ${isButtonClicked ? '' : 'rotatedContainer'}`}> <div className="dummyCarousel d-flex flex-row"> {/* dummyCarousel content */} </div> <div className='my-4'> <div className='d-flex flex-row menuCarousel position-relative'> {/* menuCarousel content */} </div> </div> <div className='dummyCarousel d-flex flex-row'> {/* dummyCarousel content */} </div> </div> </div> I am trying to implement a marquee-like animation effect for a menu carousel on the landing screen. The isButtonClicked state changes from false to true when you do handleButtonClick and to false when you reverseCallback. When I reverseCallBack, the state of menuCarousel changes to original but not that of dummyCarousel. What am I doing wrong? Edit 1: I figured that the problem is in using reversed: true for the handleLoop function
×
×
  • Create New...