Jump to content
GreenSock

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

modulareverything

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

4 Newbie

About modulareverything

  • Rank
    Member

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 If you pull the code, this should get you going; npm install && parcel index.html Lastly I've attached a screenshot of what it should look like. Thanks for any help
  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 as a 'nice to have' — I'm sure there are ways we could work around that if it wasn't possible.
  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 exact same time.
  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 it was in when you clicked expand.
  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 hard coded as blue, it'll now fade back to blue. It's a basic concept I'm sure. The example here is pretty basic too, but sometimes I might want to change the font size and revert back to the original, or change the padding or margin or even the position on the page. These things can be impacted by the viewport size. Hope that makes sense
  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!
×