seven

Hi Cassie! Thank you very much!

Hi, I wanted to ask for some detail on how is this new selector actually selecting, because console logging something like console.log(q('.x')) ends up with TypeError: Cannot read property 'createElement' of undefined and I do not know if this is selecting only the outer element or elements nested anywhere inside as well, I wanted to create an animation where one pies of text comes first, than I would like to mimic SplitText plugin by staggering in the opacity of elements so that the rest of the words would show up one after the other and than I would like to change this text with the text plugin to something else. I created a sandbox https://codesandbox.io/s/little-tdd-8jo9s?file=/src/App.js here I would expect that if i select .stagger class which is applied to many elements it will act as querySelectorAll, and by appending '>' at the end each piece would show up after the other, but in my dev env it omits the part with stagger class it and goes straight to textPlugin part, and on sandbox the textPlugin part is not being triggered. Should I provide just the class to be animated or the full path eg: '.right .stagger'? Thanks!

I understand, thank you OSUblake!

Hi Elegantseagulls thanks it works! Is a SplitText plugin a different story? I am unable to import it in this same fashion. Thanks!

Hi, How do I register plugins in next? I try the way from sandbox, also tried in useEffect, but all i get is error: SyntaxError: Cannot use import statement outside a module This error happened while generating the page. Any console logs will be displayed in the terminal window. https://codesandbox.io/s/admiring-wave-gjjhj?file=/src/CommingSoon.js edit: in the console I have strange import like it was trying to import somethinf from my files which is not there import { emojiSafeSplit, getText, splitInnerHTML } from "./utils/strings.js"; Thanks!

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?

Hey There, I have created a pen https://codepen.io/jaseveen/pen/ZEKQMoN?editors=1111 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

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!

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

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!

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!

haha no worries thanks Cassie!

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!

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!

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, }); };

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?

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

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!