Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About granularclouds

  • Rank
  1. Thanks Rodrigo, I'll definitely look into Switch Transition. That indeed looks like the component I think I would need for this. Here is a sandbox with a framer motion implementation. Not an ideal demo of either, rather rough in fact, and the GSAP one is still broken - will have to dig into that switch RTG component later today.
  2. Ah, sorry - must have typo'd at the last second before logging off last night. It's still not quite working - animations are happening sequentially. Even if I get rid of one or the other of the delay and duration in the exit function, the exiting and entering components are still on screen at the same time...
  3. Thanks for the reply again! But I don't think that is making a difference - I understand what you are saying and I agree it makes sense, but the exit doesn't seem to be occurring until the enter is all the way complete. And no fade out. I'm pretty sure the code is exactly how you specified.
  4. Sure! It's late so I don't have time to set up a sandbox for you to play around in - can quickly spin one up tomorrow, but below is the code I used: const variants = { enter: { opacity: 1, transition: { staggerChildren: 0.2, delayChildren: 0.1, }, }, exit: { opacity: 0, transition: { staggerChildren: 0.1, staggerDirection: -1, }, }, } ... <AnimatePresence exitBeforeEnter initial={false}> <motion.div variants={variants} initial="exit" animate="enter
  5. Thanks for the replies all. And thanks so much @Rodrigo - I was lost for a sec looking at your code because I've never rendered JSX like that - with the {() => {for(let x in y){... return z}}()} approach (interesting pattern to keep in my back pocket for other weird edge cases, thanks) - and while I am definitely curious if there's any possible way to get GSAP to work here using a more conventional map or similar, it definitely does work. Or at least for the enter animation - sandbox. Exit animation doesn't seem to be working. Am I missing something obvious? No sw
  6. I'm in the process of converting a project from framer-motion to gsap owing to how much more powerful and performant the latter is 🙂. I'm getting snagged on one area that is giving me a lot more trouble trying to pull off with gsap, though, unless I'm missing something very obvious. Here is a sandbox. What I'm trying to accomplish is to get a proper stagger working, on enter and exit whenever I change selection via the radio buttons. So that - on exit - the first of the two cards fades on, followed by the second, and then - on enter of the newly selected set of cards
  7. Interesting, thanks so much @akapowl. Idiosyncrasies and a variety of ways of accomplishing similar things is very often the sign of a potent tool, even if that results in some pitfalls and challenges while getting going (Framer Motion, for example, is significantly easier for me to grasp and utilize without practically any confusion, but it's quite limited, which is largely why I've landed here). Still definitely struggling to understand scrollTrigger. Hope it comes naturally by just messing around with it over time...
  8. Hm. Spoke too soon, or partially. Is there any way of achieving this without explicitly setting the height in CSS? In real world projects - particularly for clients where they have control over the content of pages - how can I proceed with this effect in situations where I can't explicitly say "height: 500vh"?
  9. Thanks for the example, @TomSES! I'm wondering if there is a consensus on whether handling these cases as you did, similar to the approach shown in this sandbox (where it doesn't appear as though the focal element is unmounted upon disappearing - but only made invisible), or if it might be better to mount and unmount, and animate these two actions with... the help of React Transition Group, right? I guess it's not that big of a deal when it's maybe just one element or something not at all computationally intensive. But I'm still trying to wrap my head around best pract
  10. Ahhh thank you so much @akapowl. And similar to floats, !important I guess is something that I've always either been encouraged not to use to the point of it slipping from my CSS vocabulary or just haven't encountered much of a need for it with the greater flexibility updates to the spec have brought. Works like a dream here though. Thanks again.
  11. Okay, so this sandbox is the closest I've managed to get. As you can see, there is an extra scrollbar that doesn't exist in @GreenSock's codepen (I think codesandbox and codepen have different mechanics - how each relates to window or root or something - yet another speedbump in learning Greensock in the context of React unfortunately). If you inspect the HTML, and highlight the div with the class of "inner" and uncheck "overflow: visible scroll" it works exactly as expected - just as Jack's codepen does above. Would you maybe be able to take a quick look
  12. Just a heads up - I'm unsure what's best practices, but GSAP can access elements in React without refs. gsap.utils.toArray('.card').forEach((card) => ...) actually works just fine in React. Loops through all elements with a className of "card" and applies your GSAP code to each. Pretty handy, feel free to assign gsap.utils.toArray('.card') to a variable and log it out - you'll see you're still getting references to all cards, wrapped up in an array to boot.
  13. I think Rodrigo meant assigning the finished SVG to the finalPath variable. In React you can assign JSX to variables - just make sure the brackets close off and it's valid JSX. If you need help converting SVG to valid JSX -> https://svg2jsx.com/ I don't think that tool is entirely necessary, but I also don't think your SVG is valid - just copy and paste the <SVG>...</SVG> from your asset files into your code. Google "inline SVG React" if you need some help on that front.
  14. Really anxious to get this working and knowing I'd sleep better if I do - but man is this disheartening. One step forward, two back. Here's my latest sandbox aiming for a smooth-scrollified version of this, which is very similar to the codepen Jack linked to in his last post here. I don't understand why I have two scrollbars and get all kinds of glitching when his codepen is smooth-sailing, with very little if any meaningful discrepancies between our code. And whoever can help, totally do so at your leisure. I'll sleep with or without this working, just I haven't been