Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About modulareverything

  • Rank

Recent Profile Visitors

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

  1. Thanks @GreenSock I saw gsap.core in the console and thought it might be related to something I was doing with GSAP. It looks like the build I'm using is stripping out my <path>'s in my SVG. No idea why it would decide to delete bits of code, but definitely a point to start.
  2. I'm working on a little animation at the moment and I have it working pretty nicely when it's running locally. When I package it and deploy it however I'm hit with errors. I thought this might have something to do with gsap trying to interact with the page before it had loaded and it throwing an error, but that doesn't explain why one of the animations is actually working fine (but the others aren't). Here's the bugged production version; https://hult-network.vercel.app/ And a link to the code; https://github.com/chrish-d/GSAP-Connected-Nodes
  3. Thanks @GreenSock this was kind of the general pointers I was hoping for — certainly not asking anyone to do the work Glad to go in armed with some information around this. I'll report back in on how I get on! Cheers
  4. I've been asked by a client if we can create something similar to the attached screenshot. I'm sure I've seen an example of something similar somewhere which used some kind of method to calculate the start/end positions of the lines but I can't find it. So far all I've done with gsap is some simple transitions so this is definitely taking it up a notch for me. Any pushes in the right direction would be appreciated. The general idea is that the images would move around and the lines would stay 'attached' in the same position. There's also a line of text which I see
  5. That was it! I completely overlooked the trigger needing to be the same ref in this case (it animates itself in as it appears). Thanks as always @ZachSaucier
  6. I'm trying to get ScrollTrigger to work as a React component that I can wrap other elements in to have them animate when they appear. So if I have a bunch of components named <Box /> and I want them to reveal themselves when as they are scrolled in to view, I want to be able to wrap them in a <Reveal /> component that will do this — rather than rewriting the same code. Is there a simple way to do this? Currently in my live example (not in the CodePen... I'm not very good at writing these) the component animates in but it does all of the animations at the exa
  7. Thanks for taking the time to reply @Rodrigo — your points are really helpful and certainly give me something to work with today as I was at a total loss yesterday! And thanks for the kind words its been a fun design and build, this one. EDIT: Solved! Adding clearProps: 'opacity', to showMoreClick() seems to work! Thanks for the help @Rodrigo
  8. I have a series of divs each with a hover function where hovering in causes an animation to play, and out causes it to reverse. I also have a `viewAll` state which allows you to expand the amount of divs that you can currently see by pressing a button. A weird bug has been reported where if you hover over one of the divs and then press the viewAll button, the animation will pause at whatever progress it was currently at. Hovering over that div again will cause the animation to play to the end, and out will cause it to reverse back to whatever progress of the animation i
  9. 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻💚👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
  10. I'd be interested in testing this out, too. I can apply it to the current build we have on a separate branch for testing as the current scroll plugin we have is very basic.
  11. Thanks again @ZachSaucier, working perfectly. Sounds like I need to go and read the full article
  12. Thanks for explaining that so well, @ZachSaucier! The bit about using relative values `+=` is invaluable. One quick follow up question, how could I chain together a timeline with this? Let's say I wanted the button background to turn red, and then maybe an arrow `<span>` appears after the text or something. button.tween = [ tl.to(button, {backgroundColor: "red", paused: true}); // can I chain them up like this in some kind of array? tl.to(...) tl.to(...) ]
  13. Hey, I'm just struggling to get my head around a concept on gsap which I'm sure I'm just looking at it the wrong way. Sometimes I want to add hover effects to a button or menu item or whatever, and revert back to its original state when the mouse leaves. For example, I have a blue button and I want it to be red when I hover and blue again when I'm not. Easy enough, but what if sometimes that same button has a green variant and I want to reuse the same code? I somehow need to tell gsap that it should fade back to green when I'm done, but because I have it har
  14. How could you add a delay to this? I tried adding delay: 0.25 to the tween but it didn't do anything Edit: delayedCall() seems to do the trick
  15. That's perfect @OSUblake — these were definitely the gaps in my knowledge. Thanks for filling them in!