Jump to content

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


  • Posts

  • Joined

  • Last visited

About MadG

  1. @GreenSock I think so. So the solution here would be to handle that hover effect using js?
  2. 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!
  3. @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!
  4. @elegantseagulls do you mind expanding a bit on the native side scroll mixed in? Where are you seeing that?
  5. @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!
  6. 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?
  7. 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?
  8. 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.
  9. 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!
  10. Disregard! I figured out that I can just do this: https://codepen.io/kslaton/pen/yLPxayJ I was wary of this at first because I also have some other conditional stuff that needs to happen concurrently, but I'm just going to solve it by checking the target classes to see if the animation is playing forwards or backwards and execute those accordingly.
  11. Hey all, back again. I'm stuck on a minor issue and hoping I can get some clarity. I basically need to be able to toggle back and forth between beginning and ending FLIP states as shown in the pen. If you play and reverse the first time, everything works fine, but if you try to play again after reversing, everything gets thrown off. Any ideas why this might be and how I can address it? 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!