Schweinedog

Thanks Blake! Thankfully in the end I could get the server to render the images as inline <svg> so the issue won't affect me. I'll see if I can file a report with FireFox or see if they have any good reasons for this different way of rendering it. I'll update this post if I hear back. Cheers! Simon

Thanks for replying! I'm on Mac and I've got the latest version (updated today actually, before and after update) of Firefox. Strange you don't see it... In this case it's not really about SVG DOM vs HTML DOM, as the third example with a regular PNG <img> tag shows. The issue occurs whether you target the div wrapping it or the element itself. The odd one out that is misbehaving for me is the svg within the IMG tag...

So it feels like this potentially has been asked a hundred times already, but my searches didn't give a satisfying answer. Please feel free to just refer me! I have this simple coin flip animation and I was coding the page it is used on with inline svg. But because of some restriction, in production that wasn't allowed and I had to revert to <img> tags. Now the result isn't 100% experience breaking, but there is a really wonky moment in the rotation in Firefox (most other browsers seem to work fine) as you can see in the codepen (in Firefox). Is there a known way around it? Can you force/trick Firefox into behaving like other browsers? Thank you in advance for your help! Kind Regards, Simon

Man that's perfect, explained and solved the issue PLUS added some suggestions on improving my code! This forum always blows my mind. Thanks, that's everything I needed and more. Bless.

Hi, so I thought I understood how randomizing values works, but turns out again I know nothing! See my codepen. I want to achieve an effect similar to the left, so all those lines tween the same amount. That, but with random values instead of a hardcoded 'cycle' of tweens. So what I have on the right was my attempt at randomizing, but (for me) unexpectedly, the random function fires once for EACH queried line instead of generating one random value for all the queried lines for each repeat... Where is the flaw in my logic? And how can I achieve what I'm after? Thank you in advance for your help, it is much appreciated! Kindest Regards, Simon

Oh wow thanks for taking the time to check my code and replying so fast! Your suggestions and solution make a lot of sense, to remove the scrub delay or to kill the delayed tween solves it! I have also restructured my code a bit already and will spend some time in between this and the next project to learn a bit more about creating more efficient gsap animation code. Keep up the great work and thanks again for the great support!

Hey guys, I'm a bit embarrassed to post this whole mess here, I bet you have a thousand ways how I could optimize and restructure my code, all comments are welcome. But my main issue is this: This is a fairly complex (for my abilities at least) animation which was surprisingly easy and intuitive to set up with gsap and the scrollTrigger plugin. It has 8 content section that define the scrollTriggers. Everything works beautifully smooth when you scroll through it at a normal speed. (Only look at the animation please, i didn't copy and paste all the page and font formatting CSS with it, only the stuff necessary for the layout and animation) The svg "#illu-workdays" is hidden at the beginning and is tweened visible by the third scrollTrigger. It stays on and has some subtweening going on in the next few scrollTriggers but is tweened to autoAlpha: 0 and yPercent: -100 in the 7th scrollTrigger. It then stays hidden. However, if you scroll super fast all the way down from the top (or, probably a more common case would be using an anchor link jump) to the last section, some unexpected stuff happens. One of the earlier triggers seems to override the one that hides it (since it maybe has duration that's longer than it takes to get to the bottom?) , even though I would expect that the toggleActions ( I set them to "restart complete restart reset") would take care of that? Do you have any advice on how to approach this issue in particular and maybe a complex scrollTrigger animation like this in general? Thank you in advance for any help and suggestions, it is highly appreciated! Kind Regards, Simon