Jump to content
GreenSock

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

granularclouds

Members
  • Posts

    25
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

granularclouds's Achievements

  1. I searched around for how to accomplish something like this, but I couldn't find anything even close, so I'm posting here in an attempt the community has an answer or can refer me to the right methods/techniques to use. Here's a very simple example of what I'm trying to accomplish, here in (S)CSS: https://codesandbox.io/s/condescending-monad-23udg?file=/src/App.js I have an element that's slowly rotating, and on hover of another element (or the parent container of both elements, it doesn't matter), I'd like the rotation to speed up and become quickly. Basically, I want to transition the transition, instead of - as is the case with CSS right now in my sandbox example - jumping from the 30s transition to the 10s transition. Any help would be greatly appreciated, thanks. Also, I've used GSAP plenty with React, so don't worry about fitting any solutions to my React template, I can do that myself - though it would of course be nice!
  2. 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.
  3. 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...
  4. 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.
  5. 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" exit="exit" className="AboutLinks__cards" key={category.uid} > {category.data.map((item, index) => { return ( <Card key={Object.values(item)[0].uid} prefix={category.uid} data={item} /> ) })} </motion.div> </AnimatePresence> The upside of framer motion is it's pretty much all declarative - everything set with props and objects. It's a pleasure to work with in React, but ultimately it's a lot more limited relative to GSAP, particularly for scroll-based functionality and anything SVG. Not as performant in my experience either. They're still building it though, and AnimateSharedLayout seems really cool - haven't used it for anything meaningful yet.
  6. 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 sweat if the fix is laborious at all. I'd ideally like to stick with only one animation library going forward but I might have stumbled upon the sole case I've come across so far where framer motion looks like the way to go. Thanks again!
  7. 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 - the first new card fades in, followed by the second. I haven't found any such example detailing how one might accomplish this stagger-out/stagger-in action. Any help would be super appreciated - thanks!
  8. 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...
  9. 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"?
  10. 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 practices in GSAP x React, coming from some of the more React-centric animation libraries like Framer Motion etc, where you would definitely opt to animate mounting and unmounting, not just hiding. And I'm not missing something very obvious, right? If you want to animate mounting and unmounting with GSAP in React you'd have to reach for React Transition Group?
  11. 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.
  12. 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 at this, @Rodrigo? I'd really appreciate any help on this. I see that you're one of the React-savier GSAP-ers in these parts. Totally at your leisure. It's just frustrating feeling like I'm so close yet so far. GSAP is way more powerful and performant than the animation libraries I'm used to (Framer Motion, React Spring), but the API is a lot harder for me to parse.
  13. 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.
  14. 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.
×