quastiqualle
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by quastiqualle
-
-
@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 ✔️
safari v17 💥
-
🙏🏻✨
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.. 😇 -
- 1
-
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.QuoteRelative to the previously added tween (
"<"
references the most recently-added animation's START time while">"
references the most recently-added animation's END time)this is what i end up with:
See the Pen vYXXXzr by jaro_io (@jaro_io) on CodePen
this is what i want, but without using absolut values:
See the Pen vYXXXQa by jaro_io (@jaro_io) on CodePen
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 to0.8s
? with my code example, the endpoints offooter.fadeOut()
andcontainer.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
🌳🍃
knockout text | css clip-path
in GSAP
Posted
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 touserSpaceOnUse
(browser default). there are some big advantages in using it over the more commonly usedobjectBoundingBox
. 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
andfont-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 changingtransformOrigin
to50% 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!
🪲 ✨
See the Pen rNoYLep by jaro_io (@jaro_io) on CodePen