quastiqualle

hey you two! 🌻 during my research i learned the following. i hope this explains it a little better and maybe it can help somebody else in the future. since i’m not rendering the svg visually, but using it solely for a clip path applied to html elements, the viewbox doesn’t play a role in determining the size or position of the clipping area. the same rule applies when setting a size (width, height) or position (x, y) for the svg. in this specific use case, these things have no effect. the svg is merely a container for the clip path definition. instead, the css transformations applied to the #mask element are what actually determine its final size and position. one more thing worth mentioning is the clipPathUnits attribute, which is currently set to userSpaceOnUse (browser default). there are some big advantages in using it over the more commonly used objectBoundingBox. because it allows to keep the aspect ratio of the text and target its size, position and other properties via css. i have created another pen to show the difference in action (again, difference between chrome and safari/firefox). userSpaceOnUse the coordinate system for the clip path will be the same as the svg's coordinate system. however, since i’m positioning and scaling the clip path using css, this setting will effectively let my css styles dictate the final size and position. objectBoundingBox the coordinate system for the clip path will be scaled and positioned to fit within the bounding box of each individual element that uses the clip path. in my setup, this would mean that the coordinate system for the clip path would adjust to the dimensions of my slides. values like x, y, width, heigh and font-size within the clip path would be interpreted as fractions (0 - 1) of the slide’s bounding box. ---- so to summarise, @Rodrigo i don’t know if using svgOrigin would have any effect in my use case, as i am not using the svg’s global coordinate space. and @SteveS that was a great catch. yes, i can confirm changing transformOrigin to 50% 50% will indeed fix the issue in safari & firefox. however, i would still like to understand why. do you have any idea? i would love to find a universal solution and only as a plan b build workarounds for specific browsers. however, if i need to go this route.. are there any built-in tools within gsap to check for that? thank you all! 🪲 ✨ https://codepen.io/jaro_io/pen/rNoYLep

@SteveS thanks for getting back to me. yeah currently it only works in chrome. safari, firefox and other browsers seem to interpret the code differently. any ideas what could be happening?

hey there lovely people ? ? i am working on a knockout text animation using css clip-path. it works perfectly fine in chrome and zooms in right to the center, which is what i want. in safari however, it goes bonkers. please test it out yourself using the codepen or have a look at the videos below. i have tried so many different things. but i cant find any gsap setting that fixes this. would love to get help here. i am definitely dependent on clip-path for this animation as the final slide layers will include fullscreen videos (not in this reduced version). so basically what i want to achieve is having the video of the current slide play in the background, while the video of the next slide already plays inside the knockout text mask. then by scrolling through the site, you go from one video to the next, flying through the text in the centre. there is one more issue i am facing thats probably not related to gsap. the animation breaks when resizing the viewport. if anyone is able to help here as a bonus, it would be more than welcome. thank you so much everyone. best wishes, jaro ? ---- chrome v116 ✔️ chrome.mp4 safari v17 ? safari.mp4

??✨ thank you so so much @GreenSock. really really nice! maybe someday you guys will also add a position parameter for aligning end points. something like'<>' or so.. ?

thanks to you two @darkgr33n & @ZachSaucier. this already helps a lot. ?

hey @ZachSaucier. thank you for your answer. of course i was already looking at the link you sent before posting. but based on whats written there, wouldnt adding the '<' position parameter align the start times instead of the end times? and '>' in fact would just sequence the tweens one after the other. this is what i end up with: https://codepen.io/jaro_io/pen/vYXXXzr this is what i want, but without using absolut values: https://codepen.io/jaro_io/pen/vYXXXQa so my question is: how can i achieve the result from the second pen without relying on absolute position values? thank you! ??✨

?? hello fellow humans. feels really nice to join this awesome community. i found so much help here already. now its time to make my own first post. - - - so! i would love to get some help on positioning tweens inside a timeline as i was not able to find an elegant solution until this point. the attached image explains what i got and what i want. so i have a main tween in my timeline that has a duration of 2s. and a few others that are shorter in time. now, basically i want to dynamically align all the other tween endpoints with the main tween's endpoint. i say dynamically because tween durations will change within the website. i know that i can use the relative position parameter for this. and with absolute numbers it works beautifully: // create timeline let timeline = gsap.timeline(); // add tweens timeline.add(container.fadeOut(), 0); timeline.add(elements.fadeOut(), '-=1.2'); timeline.add(footer.fadeOut(), '-=1.4'); timeline.add(progress.reset(), '-=1.8'); but what happens if for example my footer.fadeOut() tween changes its duration to 0.8s? with my code example, the endpoints of footer.fadeOut() and container.fadeOut() are not aligned anymore. how can i dynamically change the -1.2s to -0.8s? how can i subtract the tweens own duration, relative from the timeline endpoint? and how can i do this elegantly without using tons of variables to get each tween's duration? thank you so much for taking your time. stay healthy, stay safe. jaro ??