iDad5

I'm not sure if I understand what you want to achieve. You want to 'scrub' the video with scroll? Otherwise the text, as it is to be displayed at a synchronized point with the video would not be connected to the scroll - is that right? would likely go for an GSAP Observer, especially as you want it to be scalable. This way it seems rather easy to concoct video progress to a certain amount of scroll. If you fix the Video with css you could just set a certain scroll amount to a certain time. Provide that you have lagre enough scroll way, which should be easy to do hat seems easier to me than dealing with a ScrollTrigger. As You have to control the video element anyhow, I would probably think of a solution that ties the text to a 'ontimeupdate' event of the media element. If something goes wrong with scrubbing you stay in sync and also if you want to add an optinon of just (auto-) playing the video, it would still work... Or am reading you totally wrong?

The best way to go about it would (in my mind) be to only activate ScrollSmoother if you detect the kind of device you want to activate it for. window.matchMedia usually is a good way to go with, checking for @media (hover: none) and (pointer: coarse) but maybe you could have a go with the wheel event? It totally depends on your use-case. Also there are a lot of fringe-cases like tablets with pens, or convertible laptops, and various implementations depending on os and hardware. That swiping down for refresh isn't possible seems strange to me, (which device are we talking) - but if should be possible to fix this, by simply reacting when the page is on top and pausing scrollTrigger, or changing some configuration detils.

Well that depends on your tween, and will likely look the same (during animation) with any other variant where you tween lets the characters grow without moving them apart first. Or you could animate the stroke width too.... The expectation that everything is readable during animation is somewhat strange in my thinking. But it is you project and no one wants to convince you of anything - we just provided ideas. @Cassie's way of solving your pseudo-element solution is really a great prove of a concept, that probably wasn't (in her own words) a 'good' approach from the start. But it is working quite well in my eyes. If you have specific questions I can help with, feel free to ask, but with comments like you last one, I don't really know what to do.

Hi, @monolith I work with the typescript definitions in the downloaded zip-package all the time, and they work perfectly for me. But I have a very lean setup and I guess that you have a very different setup that might need the type-definitions to be exported?

@joxd As you brought up this thread again, I would like to use the opportunity to - A) express my relive that that tone of voice has improved. offer my two cents on the issue off accessibility in context with GSAP: I'm all for keeping things accessible, and do argue here often to not overdue fancy stuff at the cost of accessibility. On the other hand, most of us want to give some extraordinary experience to users, being it for fancy or very sensible reasons. GSAP is primarily about motions, visuals and interaction. To best enjoy either you usually need to have stable vision as good (large enough) screen an often good hand-eye coordination. A lot of times what is beding done with gasp (no disrespect meant - to the contrary) is eye-cany. and only in a fraction of cases, information depends on the animation. In an ideal world, one would expect that for example a Tetris-like game should offer voice commands for people with movement disorders. But most of us have to earn their living with our work, and we will not get paid to do that in 99.9% of the cases. I'm totally on you side that we need to raise attention to the issue and to help finding workable solutions though. My first approach to building almost anything for the public web is to make it work and look at least ok without any animation. Also I try to take a lot of care on using good semantic structuring. Like with SEO, my experience however is that often those who focus very much on the topic tend to overdue the technical-side and sacrifice the much more important content-side of things... I will try to make better use of prefers-reduced-motion in the future regarding GSAP and I try to honor high-contrast user whishes. I guess, that @GreenSock would probably accept a gues-authored blog article on how-tos regarding accessibility with GSAP as long as it is competent and friendly. I myself would gladly offer to help you with feed-back and suggestions, if you would want me to. The topic is important, and it deserves better attention. If here is not the place for such an article - I'm sure a lot of websites or blogs would take it and one or the other link here still could further your goals.

I see the snap callbacks firing in your codePen. The snap start callback ir firing rather often, maybe that due your scrollTrigger setup, but the complet callback is likely anyhow the one that you want. My gut feeling tells me that using the scroll-snap-type CSS property probably isn't a good idea, and I'd guess that Jack would have thought of that too and disabled it, ore used it - still I don't see why you would need it. If only as a fallback, you should easily be able to remove a class when you successfully initiate ScrollTrigger.

Well that reminds me - and I have to offer up a little boring old-man anecdote - because the only people in the world, that can probably appreciate it is the crazy lot around here: My challenge was similar: I had (scrollTriggerd) full-size sections. Each of them with an unknown (user changeable) background of type 'cover'. I each section were 3 elements (a hamburger, a small legal navigation and a description text) - places according to media-queries 'somewhere'. I ended up, measuring the boundingClient-rectangles for the three elements, then calculated the position and scaling of the background image (trickier than I thought), did an of scoren canvas calculation for each section that is covered by each element and set it to white or black if the average (perceptional) pixel lightness was light or dark. In cases that are hard to decide (large variance) I add a glow or drop-shadow. Have to repeat on each resize of course... In 99% of the cases it works our ok. End of boring story, but if not al least one of you can appreciate it - probably no one ever will, so please forgive me and feel free to share your crazy stories what you did for perfection. (But please, pleas pretty please. @GreenSock don't make fun of the little people, your level of crazy perfection is out of the world most of the time... :-) )

https://codepen.io/mdrei/pen/GRxQXZO that's what --dist-correction is for. You could do a lot of fine-tunin of course by introducing mor complex logic. And kernig as it is still is more or less whishful-thinking in web typography - but hey there as fine libraries out there and you could try to build your own kerning-table for each character, after all you can easily get the content of each div and fine-tune with a CSS custom property (or two) for each character. :-)

You can manipulate the values of --bold-stroke: 0.25em; --stroke: 0.11em; --dist-correction: .1em; That should get you close (enough) to what you need

Well, it (mostly) worked for me - but I found that sometimes it crashes.... https://codepen.io/mdrei/pen/ExEQpqY

@Cassie You are a true legend Milady (seems to be a thing around here lately...) @friendlygiraffe That thing with overlapping letters made me do a little rain-dance.... https://codepen.io/mdrei/pen/jOzZpRp

I wouldn't put it behind @GreenSock that he could find a solution, but to us mere mortals, the elements generated via ::before etc. aren't usually accessible by script. You could try a workaround through changing the title attribute on the fly, and setting classes to the spilt elements (newClass parameter) and maybe do a little CSS-custom-properties rain-dance. I would jut go back to your first solution if I where you, if it's still working four you....

Sounds very much like that old couple across the street

In the config section at the top set: BACK_COLOR: { r: 255, g: 255, b: 255 }, and set the background color in css to white....

My bad, your walk never ends So onRepeat is what you are looking for.

the snap property has its own onComplete callback and others.. That should do the trick.

Just a onComplete on the tween (gsap.to()) should do the trick. If you think about it, what ist completed isn't the motion-patt (the road you walk down) but your movement (the walk you took). Does that clarify things, or do you need more help?

So, I'm not a react guy, and that might be a problem, but just to confirm my guess or to prove it wrong, why don't you just console.log(animation) before you try to kill() it?

It seem to me, that you have a scoping issue. I cannot see where you create your first animation, so please provide us with a codePen or at least more of the code that's in play.

Yup, IE 11 Is dead for me., for Microsoft and largely the rest of the world. If you feel or have to feel otherwise that's tough for you.

You could / should use it on the second ticker to, just set it (using gsap.set()) to the right az the beginning and animate to totalDistance instead of to: -totalDistance (Thats just a quick glance, not a tried and tested answer...)

Me too, 97.68% seems pretty high to me, and as the prefix is the same for all supporting browsers as far as I can see, it's not really 'standard' in a legal way, but it could be used I guess, especially as I don't expect it to be unusable if not displayed.

Well. the easiest way would probably be to write two animation functions and apply them to the first and the second ticker. You can of course parametrize the function, but if you have just tose two, I would pragmatically copy it and adjust it, gives you mor flexibility.

I'm not at all familiar with Webflow, but as a general hint, I would remind you that ScrollSmoother is an addition to ScrollTrigger and ScrollTrigger needs GSAP to run, so usually you at least need to 'paste' all three of those in your page's head, if that is the only way you can go.

Even if it's prefixed, it seems to be very much cross-browser to me, as even FF uses -webkit- There might be other options like going with svg or canvas, but you would need to help us understand what it is you want to achieve somewhat better to suggest something.