Mamboleoo

Ok that is very weird bug it works so.... Thanks

Hey there, I'm currently working on some animation and I had noticed a different result in my animation if I enable the devtools or not. Try the demo first without the tools to see the expected behaviour. Then uncomment the lines 8-10 to have the tools enabled and you will notice at the beginning of the animation that there is a path showing up that's not their without the devtools. To explain the animation quickly: I have multiple paths that create the letter M. I clone each path and apply almost the same animation on both the original and the clone except that the original is getting a custom stroke-dasharray with to make some dots. From my investigation, we can see that the clone of the first path is getting a wrong stroke-dasharray value (174.5, 50, 10, 174.5) while it should only get 174.5px like it is without the devtools. What I couldn't figure out is why is this only happening on the first path, all the other are having correct values. And it's getting even more weird that the value it gets comes from nowhere in my code. This is obviously not a life-threatening issue as I won't need the devtools in production, but this demo is coming from an upcoming article so I'd like the readers to be able to easily replay the animation Cheers, Mamboleoo

Yes amazing to see that it was already fixed 🙌

Hey there! I may have found an issue with the new matchMedia() feature and using SVG. If you resize the window down (under 800px) after the animation has been triggered, there is an error in the console. Error: <rect> attribute transform: Expected transform function, "100". And if you resize it up, the animation will try to execute again but it will trigger infinite errors. Uncaught TypeError: Cannot read properties of null (reading 'matrix') I have tried with other kind of SVG attributes, and they seem to work ok (fill, stroke-dashoffset,...) This issue is happening on all major browsers (Edge, Firefox, Safari)

Oh wow... If there was a scale for stupidity I think we can an extra level on it thanks to me 🤦‍♀️ Anyway, thanks for helping and I'm going to bed right now 🌈

Oh this is very strange that both are working for you! Here is a screen recording on a MacBook M1 Pro using Microsoft Edge. As you can see, I don't have any animation on the colour 🤔 And I just tried on Safari and I'm having the same issue with the first demo (the one with "0 0 2000 2000" for the viewBox). Screen Recording 2022-01-04 at 17.34.01.mov

Hey there, I'm working on a ScrollTrigger animation today and I'm having a really weird issue. See in the attached CodePen how the .fromTo() is applying the end fill colour straight ahead, which make the animation not visible. I have tried with different colours and it didn't help. Now here comes the funny part: If you change the viewBox values, the animation works 🤯 See here, I updated the y value of the viewBox and you can see a result: https://codepen.io/Mamboleoo/pen/c19d1c77a30d27fee0dec5591ceb6d1e?editors=1010 I've tried a couple of parameters but I can't seem to find a reason why the first demo doesn't work... Maybe you'll have a better idea 💚

Oops this is def my bad 😪 I opened my pen on my phone and thought this was causing the error but indeed it my was code. Thanks for the quick help ✌

Hey, i was just checking a pen I worked on today on my phone and noticed there is an issue for the CustomEase plugin I’m loading. It is weird that I have that error on my phone as I didn’t get it while working on my computer for 2 hours. I wonder if this isn’t because codepen Iframes are not on codepen.io domains? Or because I’m on mobile and not desktop? As I’m on my phone right now I can’t debug more but I’ll check on my computer tomorrow if there could be another reason for that error. Thanks, Louis

Thanks you both for your answers, I've added some notes in my post! Yup transform-box is quite new but has a good browser support. It's really life changing when playing with SVG ❤

I think there is a misunderstanding here With GSAP default origin, it takes the "top left" of each element. While the SVG specs define the default origin to the "top left" of the viewport as written here: https://www.w3.org/TR/SVG2/coords.html#InitialCoordinateSystem I have updated my demo with a pure CSS animation, and you can see the difference where I don't set the origin (except for the last one). Chrome, Firefox & Safari all use the origin of the viewBox, and not the top left of my rectangles. https://codepen.io/Mamboleoo/pen/c4e7f07558496b087c7ce275973f6b52 To be honest I have no problem with this behaviour, but I was trying to understand why it didn't match with CSS animation and I don't know if it really worth adding a note in the docs as people will (I think) add a transform-origin if it doesn't work the way they expect

Yup that's precisely why I'm asking because I'm working on a small demo page for our viewBox newsletter with Cassie and I didn't understand where the "top left" value was from. It could come historically from the smooth origin feature but I wanted to understand why those coordinates were picked ^^

Hey there, I'm working on a little demo with SVG and origins, and I realized that the default value for SVG element origin is not the 0,0 coordinates of the SVG (as default in most browsers). But it is also not the center of my elements. From the attached CodePen you can see that the default origin origin is the Top Left corner of each element. I was wondering where that decision was from and if it shouldn't be noted in the docs? https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

The issue is that I'm not sure only the last section will have the issue. If you set the last section height to 100px, now the last two sections are never fading-in 😕 https://codepen.io/Mamboleoo/pen/LYROwWL Also I may have images in one of those sections, so the height can be wrong on page load. I guess this would work (if I had event listener to loaded images) ScrollTrigger.create({ trigger: "body", start: "bottom bottom", onEnter: triggerAllLeftTweens });

Thanks for your help, I'll go with dynamic solution as my last section could be 3000px tall, and I don't want the user to scroll all the way to the bottom to see that last part Enjoy your weekend ✌