Mamboleoo

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 ✌

Ola! I'm working on some basic fade-in effect with scrollTrigger and I'm encountering an issue with the last component not being displayed when reaching the end of the page. As you can see from the markers, this is not an issue with the plugin, the start position of the last section is never reaching the scroll-start. To avoid this issue I've added a listener on the scroll and when reaching the end of the page, I'm forcing all the tweens to be played. Would there be a better alternative to this? I was looking for a method from ScrollTrigger to activate it manually (e.g. tween.scrollTrigger.force()) because now the tween is being played (in my Codepen) but scrollTrigger is not cleared out. Happy holidays 🎄 Mamboleoo

Assigning dynamic values with functions and calling update() could work indeed! Thanks

Hey there, I have a ScrollTrigger animation with fixed start & end values const tween = gsap.fromTo(el, { background: 'red' }, { scrollTrigger: { scrub: true, start: 0, end: 500 }, background: 'blue', ease: 'none' }); How can I update the end value on my side? Let's say after after the user opens a modal I need to update the end value to 100. tween.scrollTrigger.end = 100; doesn't work as it is a read-only value. I found the updateTomethod on GSAP 2.0 but it seems to have been removed on 3.0 Thanks!