NickWoodward

yeah nice job. followed on codepen

.

I'm just doing Carl's masking tutorial using BoxySVG, and I thought I'd sorted it, but I'm finding positioning the mask *really* finicky. Sometimes zooming out it looks like there are gaps between the masks (I'm doing multiple strip masks and need them to sit flush), and sometimes it looks perfect. Positioning the adajcent masks by adding the height to the y position makes the gaps look worse, which doesn't really make sense 😕 Is there a better way to position them relative to each other? Does it even matter? Thanks, Nick

Hi Rodrigo, I kind of understand the complexity argument I think, but wouldn't that really only be a problem if the more abstract component was responsible for its child's animations? The Modal would only ever responsible for itself, animating its own elements, and then the newly mounted child menu runs its own animations (whatever they may be), so I'm not really clear why one would have to handle the other. I mean from your replies that's obviously not how it works - I'm not arguing or trying to be a smartass 🙂 I'm just trying to think out loud to make it easier for you to correct me! Either way is it fair to say that a) animating on mount/unmount is a problem and should be avoided, and b) that I'm not really going to be able to animate components that are passed as children? Thanks, Nick

Ah I think I may have understood now? - are you suggesting that each portal or modal has one purpose? So I render a menu into one, a tooltip into another, etc, so therefore each element can be hardcoded into it and so not have to mount/unmount?

Hi Rodrigo, appreciate the reply, sorry if I'm being a little dense here and that I took a while to respond - things have been hectic and I wanted to sit down and really understand what I've missed here! Isn't that what I'm doing though? As far as I can see i'm creating a both a Modal and Menu seperately and passing one to the other? For example my Modal doesn't reference my menu at all? export const Modal = forwardRef<HTMLDivElement, Props>(function Modal( { close, show = false, className, children }: Props, ref, ) { const classes = cn(" absolute top-[80px] right-0", className); return createPortal( <Transition mountOnEnter unmountOnExit in={show} addEndListener={(node: HTMLElement, done: () => void) => { const ctx = gsap.context(() => { if (show) { gsap.set("#modal-content", { y: 50 }); gsap .timeline({ onComplete: done }) .to("#overlay", { autoAlpha: 0.65, duration: 0.5 }) .to("#modal-content", { autoAlpha: 1, y: 0, duration: 0.5 }, "<"); } else { gsap .timeline({ onComplete: done }) .to("#modal-content", { autoAlpha: 0, y: -50, duration: 0.5 }) .to("#overlay", { autoAlpha: 0, duration: 0.5 }, ">-=0.1"); } // return ctx.revert(); }, node); // document.body.classList.toggle("overflow-hidden"); }} > <div ref={ref} id="overlay" className={classes} onClick={close}> {children} </div> </Transition>, document.body, ); }); Maybe I've accidently linked the wrong sandbox? From what I can see both examples pass a fn to a Modal component that sets the `isOpen` or `modalVisible` state in the parent (in App in your example, or in Header in mine) The only difference (other than mine not working XD) is that I pass a Menu as a child component, whereas the simple example has it hardcoded into the modal? Should that make a difference here? Apologies if I've missed something simple, React definitely isn't my strongest suit!

Hi @Rodrigo So a little more playing around and it's sort of working. The content is animating, but the overlay isn't. I would assume this was because `createPortal` is still removing the element from the dom behind the scenes, but that doesn't explain why the content is animating but not the overlay, does it? I've removed my conditional rendering, like you recommended, but have decided I do still want to have a more generalised modal if possible (I can't seem to see much suggesting it'll be that detrimental to performance? always happy to be corrected though!) https://codesandbox.io/p/devbox/priceless-kilby-l8mdhm?file=%2Fsrc%2FModal.tsx%3A21%2C19

Thanks, it definitely wasn't! Better than last time, but if I catch it anymore frequently than I've currently had it I'll be ditching the pub entirely! I just seem to be a bit unlucky with how I react to it 😑 I'd actually got similar code working in the modal directly, but wanted to create something more reuseable/separate out the logic. So the modal deals with its positioning on the screen and any click events on the bg layer (so it can be used for any pop-up content), and any child elements - whatever they might be - handle whatever they're supposed to handle. That doesn't sound that strange does it? (definitely not rhetorical!) No, just habit I guess. I'm very used to the `condition && <div>component</div>` approach that seems to be popular with React. But yeah, I remember usually chosing to keep elements in the DOM in vanilla js, so don't mind doing that at all I may have lost my patience just before getting to this point 😄. So would I call it in the onComplete of any timeline inside the addEndListener hook? As for using Context, isn't that just an alternative to my local state? It's only in the parent and I can't see the info being needed across the app, so Context seems a bit much - unless you can see an advantage on the animation side of things? Ahh, yes this is the demo I was hunting for earlier, thanks. This is where it all started - I saw my menu animation was in the modal and wanted to split the two apart! I'll have a bit more of a play (an hours nap has done me wonders), but RE that demo specifically - where does `done` actually come from, and do I not need to revert the ctx? Thanks @Rodrigo, really appreciate you taking the time

Hi all, I was just hoping someone could point me in the direction of a simple example of React-Transition-Group please? I'm trying to animate a menu without much success (I've not really used gsap in react much at all, plus I've just kicked covid so my brain is **struggling!**). If someone does have a second to look at my demo, I'd really appreciate it, but a simple example I can read about would be great otherwise! https://codesandbox.io/p/devbox/vibrant-yonath-crgfzq?file=%2Fsrc%2FMenu.tsx%3A68%2C1 Relevant code `Menu.tsx` lines 47 to 66: return ( <Transition mountOnEnter unmountOnExit in={show} addEndListener={(node: HTMLElement, done: () => void) => { const ctx = gsap.context(() => { const menuItems = gsap.utils.toArray(".menu-item"); if (show) { gsap.set(menuItems, { autoAlpha: 0 }); gsap.to(menuItems, { autoAlpha: 1, stagger: 0.1 }); } console.log(menuItems, done); return ctx.revert(); }, node); }} > <div className={classes}>{renderedItems}</div> </Transition> ); Thanks!

Thanks mvaneijgen, sorry, I should have been more clear but I'd made a couple of simple errors (wrong scope for one element for example) that confused me a bit. Made it work with the help of your example, so thanks: const aboutScope = gsap.utils.selector('.about'); const cardsScope = gsap.utils.selector('.cards'); const cards = cardsScope('.card'); const btns = aboutScope('.contact-btn'); const elements = [...cards, ...btns]; elements.forEach((element, index) => {} I'm ngl, still a bit confused why that's not equivalent to const aboutScope = gsap.utils.selector('.about'); const cardsScope = gsap.utils.selector('.cards'); [...cardsScope('.card'), ...aboutScope('.contact-btn')] .forEach((element, index)) => {} but I'm happy it works either way! I defintely was, it was a few things, including that. Got myself confused and wrote a rather bad question because of that, sorry! It's working now though, but next time I'll include a demo

Sorry if this is a silly question, but how can I add to a scope? So if I have a scope like: const cardsScope = gsap.utils.selector('.cards'); which at least in my mind returns an array of card elements that exist in the element named '.cards', as an array that I can loop through adding scrolltriggers: cardsScope('.card').forEach((card, index) => { //stuff } But how can I add an element with a different name (that is in the '.cards' scope), to that loop? I thought as it returns an array I could get away with [...cardsScope('.card'), ...cardsScope('.cards-btn')].forEach((card, index) => { //stuff } but no such luck. I'm probably completely misunderstanding 😄

Ok that's great to know. I'm not really a react guy but I'll probably try and stick to the convention of whatever the framework is. I've done bits and pieces in vanilla js and recently in astro (with react components) so I might mix and match 100% on 'if it works it works', but i can defintely confirm that when you're new/bad at a framework scouting out what is sensible or even possible can save some deep rabbit holes, so being told it's subjective is really useful, thanks

Sorry @Rodrigo, thought I'd ask one more related question if you don't mind? (because at least there's a bit of context) Transition looks perfect, and conditional rendering seems to be the norm in react, but another thread left me wondering if it would be bad practice to take a different approach and leave the modal (or any element) in the dom and toggle autoAlpha (which I'd stupidly forgot existed) instead? I've not tried it, would I be destined to not have fun?

I think the fact that I still don't quite get the first part just reinforces the need for React Transition Group XD Really appreciate the detailed answer, thanks

Hi everyone I'm trying to get a bit better with react and gsap so thought I'd make a menu. Was hoping for a bit of help with conditional rendering please! I've managed to make my modal (which contains the menu) animate on mounting using useLayoutEffect, but I can't remember how to reverse the animation when it unmounts? Can I do it in the function that's returned from the useLayoutEffect? https://codesandbox.io/p/sandbox/template-jzqg49?file=%2Fsrc%2Fcomponents%2FHeader.tsx%3A25%2C29 Thanks, Nick *Edit: Ahhh, "exit animations", does what it says on the tin I guess *Edit2: Is it correct to add multiple animations like this: useLayoutEffect(() => { ctx.add("add", () => { gsap.set(modalRef.current, { opacity: 0 }); tl.current.to(modalRef.current, { opacity: 1 }); }); ctx.add("remove", () => { gsap.to(modalRef.current, { opacity: 0, onComplete: () => setActive(false), }); }); return () => ctx.revert(); }, []); https://codesandbox.io/p/sandbox/template-forked-myk6hh?file=%2Fsrc%2Fcomponents%2FModal.tsx%3A27%2C3-42%2C1 *Edit 3: Yeah, I've got really confused about what level I should be applying animations at: in the parent as part of a timeline, or on mount/unmount for each component and just let react render them

Think you need to register scrolltrigger before you use it bud gsap.registerPlugin(ScrollTrigger); Either way, that got the markers working for me

Hi Rodrigo Yeah I'm very new to React so hadn't really thought about/been tripped up by using state in a useEffect, but that's definitely the sort of rake I'd have spent hours walking in to, so thanks! So it's because the useEffect runs once with the value count initially has, whereas setCount's function argument is run with the actual state each time it's called?

Hi Cassie. Not sure how often it would impact gsap, but I think there's a slim chance`setReversed(!reversed)` can use a stale value here? Think the function argument `setReversed((currValue) => !currValue)` should be used if the new state is based on the old state

I will definitely take a look at that plugin, and those templates once I move this to react again. Thanks @Cassie ohhhh, yeah ok thanks. Weird that it sometimes gives issues, but not others? Either way now I understand the problem, thanks. First thought - if I accept that the sticky footer will never scroll, could I attach a listener to the element that reverses the animation on scroll? Will let you know XD *edit lol at lorem weeeeeeeee ?

ah, not sure what my brain was doing ? thanks *frantically googles how scroll events work* why would a fixed element change how the scroll events propagate? just out of interest, do you think there's a better way to achieve the same effect? that was just my first quick effort at it, there's no reason it's a sticky element

Hi @Cassie Got it working (ish), but it occassionally just gets stuck and the footer won't animate out, which is kind of a design flaw on my part XD https://codepen.io/nwoodward/pen/abPbVay?editors=1111

Hi Cassie! I knew there was something I must have deleted when I removed the scroll trigger defaults, and the scroller option was the one! Was driving me nuts. Thanks! Also, the start and end options get defaults at the top and bottom of the element, right? Thanks again!

Hi all, I was trying to help someone out earlier with this scrolling effect that triggers a modal when they get to the bottom of the page It was a little hacky as I haven't used scrolltrigger in a while: I tried using an `onEnter` on a fake element: ScrollTrigger.create({ trigger: '.fake-panel', onEnter: () => console.log('onEnter'), markers: true }) It worked fine in vanillajs and codepen, so I moved it over to a React example for them. Seemed to work fine again. They then mentioned that it seemed to only work every so often, and it started misbehaving for me too. I've obviously missed something, like I've just added the start and end properties to the scrolltrigger object and I'm only seeing the scroller-start and scroller-end, but not the triggers on the element itself. What have I've missed? ? Thanks, Nick

As in because you have to put the entire route element in a TransitionCompontent / the Transition component's onEnter fn only passes you that component as a node? Wild guess, I didn't really understand that bit tbh Yeah I think I understand, like an animated curtain of sorts while the scene changes? Why would that be beneficial? Because it wouldn't be as tied to routes or something?

Ah, I thought it was potentially specific to the transition. Looks great though