seven Posted July 1, 2021 Share Posted July 1, 2021 Hi I have a project in React where I want to showcase icons on hover of element, I quite managed to do that but I am getting unwanted dancing behavior that makes hovering satellite elements unavailable and it seem to remember last position and I would like to always start with this same values and finish animation nicely. Perhaps React way of activating interaction does not work well with gsap? How can i achieve the effect when on hover satelites go out, on hover out animation finishes instead of triggring on/off and on the next hover it all starts and finishes in the same place without the need to refresh the browser? Here is the screen recording and the code: https://vimeo.com/manage/videos/569878462 ``` import React, { useState, useEffect, useRef } from 'react'; import { ShowcaseLogo } from './ShowcaseLogo'; import gsap, { TimelineMax } from 'gsap'; function random(x, y, snap, reuse) { return gsap.utils.random(x, y, snap, reuse); v; } export function Showcase({ target, fileNames }) { const [active, setActive] = useState(false); const showcaseRef = useRef(null); const animateTopEls = () => { const topEls = document.querySelectorAll('.topEl'); const bottomEls = document.querySelectorAll('.bottomEl'); var tl = new TimelineMax({ yoyo: false, repeat: 0 }); var tl2 = new TimelineMax({ yoyo: false, repeat: 0 }); const resetTl = (tl, elements) => { return tl.to(elements, { y: 0, left: 0, opacity: 0, duration: 0.1, }); }; const randomY = random(40, 90, 3, true); active && tl.to(topEls, { y: () => -70, x: (i, el, arr) => -100 + ((el.getBoundingClientRect().right * i) / arr.length) * 2, opacity: 1, stagger: 0.01, }); !active && resetTl(tl, topEls); active && tl2.to(bottomEls, { y: () => 70, x: (i, el, arr) => -100 + ((el.getBoundingClientRect().right * i) / arr.length) * 2, opacity: 1, stagger: 0.01, }); !active && resetTl(tl2, bottomEls); }; useEffect(() => { animateTopEls(); }, [active]); return ( <div onMouseEnter={() => setActive(true)} onMouseLeave={() => setActive(false)} ref={showcaseRef} > {fileNames.map((fileName, index, arr) => ( <ShowcaseLogo name={fileName} index={index} maxIndex={arr.length - 1} top={index <= arr.length / 2} /> ))} {target} </div> ); } ``` Many thanks! See the Pen PomqbWY?editors=0010 by jaseveen (@jaseveen) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 1, 2021 Share Posted July 1, 2021 Heya! Your codepen's not working and it's a little hard to tell from just looking at the code - but I'd bet on a pointer-events conflict. Hovering the children of that div probably triggers mouseOver too, so it's not sure whether to play or reverse when the elements move under the mouse. Stick pointer-events:none on the children of your div and see if that helps. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 1, 2021 Share Posted July 1, 2021 Hi seven! Your codepen doesn't work because you are trying import local files. import { ShowcaseLogo } from './ShowcaseLogo'; If you want to use imports on CodePen, try using a CDN like skypack. import { gsap } from 'https://cdn.skypack.dev/gsap'; TimelineMax is deprecated. Just use gsap.timeline(). Also, check out the new scoped selector. See the Pen BaWOZpM by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
seven Posted July 2, 2021 Author Share Posted July 2, 2021 Hi Cassie, Hi OSUblake, thnaks for replies! Disabling pointer events seem to work for this dancing effect, however I am unable to hover over them now to activate color, and when I want to use the selector for react I am getting TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.utils.selector is not a function . Perhaps this is some sort of animation i am trying to achieve that is to be googled under some name? I added missing component to the codepen and prepared sandbox https://codesandbox.io/s/thirsty-minsky-smtgt?file=/src/App.js but I am fetching files with node and i cannot do it in sandbox or codepen. Perhaps you did not see the screen recording and that would shed some light on my problem https://vimeo.com/manage/videos/569878462 With thie solution from Cassie my biggest issue is that it deos not reset animation after use but next hove uses previous positions Link to comment Share on other sites More sharing options...
seven Posted July 2, 2021 Author Share Posted July 2, 2021 I have tried gsap.set because i was hoping this would reset values to the oryginal ones but it did not work also onComplete i tried to run gsap.to with values from the resetting function, Please tell me why are those values not being reset and my animation in getting further and further away? Link to comment Share on other sites More sharing options...
seven Posted July 2, 2021 Author Share Posted July 2, 2021 yeeey success! i managed to achieve what i wanted but wrapping reset values into a function like so const resetTl = (tl, elements) => { return tl.to(elements, { y: () => 0, x: () => 0, opacity: 0, duration: 0.1, }); }; 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 2, 2021 Share Posted July 2, 2021 please make a minimal demo on codepen. It's a small interaction - you don't need to use a framework to demo it. Just recreate the markup in codepen, and add GSAP. The main use of a minimal demo is to strip it right back and focus on the basics. Link to comment Share on other sites More sharing options...
Cassie Posted July 2, 2021 Share Posted July 2, 2021 Ok cool! Glad you got there in the end! Link to comment Share on other sites More sharing options...
seven Posted July 2, 2021 Author Share Posted July 2, 2021 Hi I have managed to prepare working sandbox https://codesandbox.io/s/thirsty-minsky-smtgt?file=/src/App.js as you can see i want to align elements next to each other and on hover to add color to them, but before i get to them they dissappear, also they are not being aligned evenly but some gaps are bigger, would you have idea on how to overcome this? Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted July 2, 2021 Share Posted July 2, 2021 11 hours ago, seven said: to use the selector for react I am getting TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.utils.selector is not a function Make sure you have the latest version install, 3.7.0. I'm a little unsure what you're trying to do in your demo, and we don't have the resources to figure out logic problems for you. I would second what @Cassie said. 10 hours ago, Cassie said: It's a small interaction - you don't need to use a framework to demo it. Just recreate the markup in codepen, and add GSAP. The main use of a minimal demo is to strip it right back and focus on the basics. Link to comment Share on other sites More sharing options...
seven Posted July 4, 2021 Author Share Posted July 4, 2021 ok, no problems, thanks for a good will I got to the point where I'm quite happy with how they fade in, but perhaps you could help me with another challenge I want on hover over each satellite to spin and on hover out I want it to stop, possibly half way, I mean the moment I hover out it stops without finishing the circle but so far all I am getting is that all of them are spinning, and it looks like either parents animation propagates to children or they propagate to each other because I had a situation where the were starting one after the other, but I don't remember what I have done As you can clearly see these are my very beginnings with Gsap, but I want it to be a friend of mine I also prepared a sanbox, in codepen I did not know how to use React https://codesandbox.io/s/elastic-galileo-zwikc?file=/src/App.js. Thanks a million! 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 4, 2021 Share Posted July 4, 2021 I'm afraid I'm not clued up with React enough to parse that demo I'm afraid pal. Maybe someone else can help? 1 Link to comment Share on other sites More sharing options...
seven Posted July 4, 2021 Author Share Posted July 4, 2021 haha no worries thanks Cassie! Link to comment Share on other sites More sharing options...
seven Posted July 4, 2021 Author Share Posted July 4, 2021 hi! I have updated the sandbox I am almost there! https://codesandbox.io/s/elastic-galileo-zwikc?file=/src/App.js Would you please be able to tell me how to stop it halfway on hover out and resume it if hovered again from this same place? that would be awesome! Thanks! Link to comment Share on other sites More sharing options...
seven Posted July 4, 2021 Author Share Posted July 4, 2021 Hi, it's me again, If you were so nice to give me a code review on gsaps practices please this was my first time with something a little more complicated than simple .to() and I want to get well with gsap so I thought it would be ok to ask for a review And perhaps if you have some valuable info about righting reusable functions and about good courses in general Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted July 4, 2021 Share Posted July 4, 2021 Your GSAP code seems fine. It's pretty hard to mess that up, but this article has some tip and tricks in it. https://css-tricks.com/tips-for-writing-animation-code-efficiently/ 2 Link to comment Share on other sites More sharing options...
seven Posted July 5, 2021 Author Share Posted July 5, 2021 thanks, and would you be able to tell me how to stop the satellites on hover out? I am having very hard times with it. When I set up timeline and then try to play or resume and pause or kill on hover out it does not work, when I try to reset the timeline with resetTl function in breaks the whole animation I have updated the sandbox https://codesandbox.io/s/elastic-galileo-zwikc?file=/src/App.js Link to comment Share on other sites More sharing options...
seven Posted July 5, 2021 Author Share Posted July 5, 2021 also my animation sometimes does not finish clean, sometimes the satellites are still visible like on a print screen, would you advise me on how to properly clean this, Thanks! Link to comment Share on other sites More sharing options...
Cassie Posted July 5, 2021 Share Posted July 5, 2021 Hi Pal - I've never seen this before. Would it be possible to put together a codepen with basic HTML and vanilla JS? You're likely to get a lot more help that way. The only reason to include React is if there's some sort of React/GSAP conflict you need help with. By stripping it back we can just focus on the GSAP logic and help you get the animation working smoothly. 2 Link to comment Share on other sites More sharing options...
seven Posted July 6, 2021 Author Share Posted July 6, 2021 Hey There, I have created a pen See the Pen ZEKQMoN?editors=1111 by jaseveen (@jaseveen) on CodePen I have moved everything onto one timeline and I reference items by class names formerly I did it by passing a reference to children and creating separate timelines for them, but I could not get effect when the satellite stops on hover out, and still I have difficulties with resetting animation on hover out, when I use resetTl fn on second hover the satellites that were rotating are still rotating and I want them to be reset, and when I hover over a satellite I want it to tart rotating and stop on hover out. Would you also be able to tell me which approach is better, the one with many tls, or the one with one? The one with one tl seems to be cleaner but when i hover over satellites they reposition on X axis for some yet to be discovered reason, I wanted to use play, reverse fns on the timeline but does not seem to work. Thanks for helping me with that Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 6, 2021 Solution Share Posted July 6, 2021 This may be helpful for you in react land to reference elements. I didn't have time to dig into your spacing logic so I've replaced that with random values, but this is what you'll want to be doing to play and reverse the timeline on hover See the Pen YzVwBbR?editors=0111 by GreenSock (@GreenSock) on CodePen Also. You can't just pass opacity and perspective into a timeline object. - are you looking for the defaults object here? const tl = gsap.timeline({ yoyo: false, repeat: 0, autoRemoveChildren: true, perspective: 1400, opacity: 0, }); 4 Link to comment Share on other sites More sharing options...
Cassie Posted July 6, 2021 Share Posted July 6, 2021 I've added a grey area so you can see the hit area for hover. All children have pointer-events none so they don't interfere with the hit area. If you also want to be able to hover the children too, I think stuff's going to get complex - maybe someone else can help there? I'm not really sure how you'd do that without things getting messy. 3 Link to comment Share on other sites More sharing options...
mikel Posted July 6, 2021 Share Posted July 6, 2021 Hey, Could this be a way to manage the hover? See the Pen NWjxEMp by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
seven Posted July 6, 2021 Author Share Posted July 6, 2021 Thanks Cassie, thanks Mikel I will analyze both solutions and try to learn from them, Cassies looks exactly as I wanted so I mark is as a solution, but I did not manage to reverse it with the reverse method, anyway if I would like to have the satellites moving independently should I put them on a separate timelines or should I have them on one but separate or should i have them on the main timeline? 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 6, 2021 Share Posted July 6, 2021 That would depend on how you would like to have them move and what relation that movement has to the explode animation. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now