Jump to content


  • Posts

  • Joined

  • Last visited

  1. @GreenSock awesome. Thanks so much for your help.
  2. Hey all! See attached pen. The idea is when you click a card, it removes that card, then fetches a new batch of data and adds a card with that new data. Everything seems to be working as intended except that the new incoming card isn't getting included in the FLIP animation. It makes sense why, as it's not even in the DOM yet when I'm running Flip.getState(), but I can't think of a way to get around that. Is what I'm asking for here even possible or do I need to think of another approach? Thanks!
  3. @GreenSock I think so. So the solution here would be to handle that hover effect using js?
  4. Hey all. See above pen. I'm running a relatively simple FLIP animation, but when I assign a hover class to each box, the FLIP still animates correctly, but there's a flash of the boxes moving around afterward. If you comment out the &--canHover bracket set in the SCSS, it works as predicted. Any ideas why this might be happening and how I can work around it? Thanks!
  5. @elegantseagulls perfect. I removed the pin-in-fixed because I realized I didn't need the fixed div on that specific page, so that may have removed it. Thanks for your help!
  6. @elegantseagulls do you mind expanding a bit on the native side scroll mixed in? Where are you seeing that?
  7. @elegantseagulls thanks for your input here. After doing some research last night, a lot of the performance hit was due to having CSS filters on all the image elements on the page. Didn't realize Safari doesn't like filter. Changing those to box shadow made a night and day difference on local. I will definitely look into your suggestions though, thank you!
  8. Hey all. This problem isn't something I can really recreate in a Codepen, it's more of a general "why is this behavior happening and what can I do about it" question. I built this page using ScrollTrigger according to the official Codepen on horizontal scrolling sections. It's working totally fine and smoothly for me in Chrome and Firefox, but in Safari it's insanely jumpy. It scrolls halfway down the page vertically then snaps back into its correct place. Has anyone else been experiencing these issues with Safari, and is there anything I can tune in the ScrollTrigger settings to try and smooth it out a bit?
  9. Hey all, Forgive me as I'm pretty new to Pixi, which is probably why I can't figure this out. See attached codepen. I'm trying to animate the radius of the circle mask. What's the best way to do this?
  10. Awesome, thanks @mikel and @PointC . After looking into it more I may just go with some absolutely positioned spans to create the edges, especially after what you're saying with FF. This is all super helpful though.
  11. Hey all, Got kind of a weird one for you today. I'm working on a site with a bunch of offset borders that need to be drawn in from bottom left on scrollTrigger. I want these borders to be 2px regardless of screeen size or SVG scale, so I'm using the vector-effect: non-scaling-stroke property. However, as you can see in the pen, that's causing a funky effect where drawSVG is segmenting the line into 100px segments and drawing them. Anyone know of a different way I can accomplish what I'm trying to do here? Thanks!
  12. @OSUblake ok that's a good call, thanks for the help!
  13. @GreenSock thanks, totally understand and this is all super helpful. I do have one question about Flip returning a timeline. So currently in my code I have Flip.from(... { onComplete: () => { gsap.set(... { onComplete: () => { Flip.from(...) } }) } }) I understand what you're saying about being able to chain the .set onto the Flip.from, but if I've already captured the second FlipState earlier in my code, can I just chain the second .from after the .set?
  14. Hey all! Below is a sample of a rather complex animation I'm doing using FLIP on one of my sites. It performs totally fine here, but it's rather complex and in the context of the site with other active scrollTriggers and such going on, it's catching a bit in the middle, when the cards shuffle out from the bottom and sides. Any suggestions on how to make this more performant and just clean up the timeline in general? I get a little stuck with FLIP sometimes since it appears it can't be chained into a timeline like a normal tween.
  15. @OSUblake that definitely looks cleaner, I tried that first but for some reason on my actual site SplitText was breaking my spans into new lines when I called new SplitText. I may go back and do some debugging to figure out why. Thanks!