Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by MadG

  1. @elegantseagulls do you mind expanding a bit on the native side scroll mixed in? Where are you seeing that?
  2. @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!
  3. 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?
  4. 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?
  5. 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.
  6. 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!
  7. 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.
  8. 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!
  9. @OSUblake ok that's a good call, thanks for the help!
  10. @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?
  11. 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.
  12. @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!
  13. As soon as I posted this, I figured out what was off in the timing. Still open to any critique of the code or suggestions on how to make it cleaner!
  14. Hi all, back again! Simple codepen above. I would like to inject a brief pause in the animation after each sentence. I think I'm in the ballpark - I've at least gotten to the point of having an increased stagger based on period position - but something on the timing is off. Any advice?
  15. Hey @OSUblake, I dropped your onLeave and onLeaveBack handlers into my pen, and it's looping backwards but not forwards. Any thoughts on why? Edit: nevermind, I see it works when embedded in this window, it just must be something weird with the codepen window in my browser. Disregard! https://codepen.io/kslaton/pen/eYeOxZJ
  16. @OSUblake perfect, exactly what I was looking for. Thanks!
  17. Not sure whether I'm actually going to do this but just curious how y'all would handle it. In the above pen I'm basically moving through 4 quadrants of a square on scroll, and that all works fine. Trying to figure out how I could make it infinite, but it seems like setting body to scroll position 0 doesn't work, unless I'm typing something wrong. Any thoughts?
  18. @OSUblake that makes sense and I'll see if I can do that. Out of curiosity though, how would you handle it if the element you're animating has to set the width or height of its parent? Just manually remove the absolute positioning once it gets back in place?
  19. @OSUblake sure. This is a simple version of a site I'm working on where I have grid of photos. When I click a photo, the others fade out, and the photo moves into an absolutely positioned lightbox. The photo's lightbox position needs to always be in the same place on the page, vertically centered and then horizontally centered in the left half of the page. The photos are not all square, but before running the flip animation I'm getting the target photo's aspect ratio and setting the lightbox placeholder to the same aspect ratio. Then, on clicking the backdrop or a close button, the photo moves back into its place in the grid and all the other photos fade back in. Is that all making sense?
  20. Hey all, Little bug I'm trying to figure out the cleanest way to fix. In the codepen, clicking a box FLIP fits it to the top right of the screen, then clicking that same box in the top right FLIP fits it back to its position. However, when it moves back into position, it stays position: absolute. So, if you then click the second box in the first row, the first row collapses since it isn't fixed height. Is there a clean way to revert the item to all of its pre-FLIP style parameters without using .set ?
  21. See codepen. When I click the button, nothing happens for 5 seconds, then it jumps to the final state. Why isn't it tweening? Thanks!
  22. @akapowl makes almost too much sense! Thanks so much, it also worked on the project I'm actually working on.
  23. Hey all, I had this working yesterday, but I've now forgotten how. Can anyone tell me why why the gap on this grid is not animating back and forth but rather just snapping? Thanks.