Ninthony

Scratch that, I needed to include the ScrollTo library in my code, didn't realize it wasn't a part of ScrollTrigger itself.

Is there a way to do this without the SmoothScroller?

Appreciate it @Rodrigo, I'll have to pick it apart. Thing was I needed the lottie animation to STOP when I got to a certain point to reveal some text. So I kind of needed it to be a part of the same timeline, so the way you feed the animation property the timeline variable in the scroll trigger. I wasn't certain of how to achieve that. I haven't taken a deep look into what you posted, but it looks like the one example just scrolls through the entire animation. I don't think that would have been a problem for me if that was the case. I will bookmark this though cause I'm sure I'll encounter a similar situation.

Posting here for visibility. If you're using the <lottie-player> component and loading the Lottie animation in through it's src and having a flickering issue on iOS while tying this to a scrub for GSAP, the problem is that the lottie player only loads in the first png in the sequence until scrubbing begins and then dynamically introduces the frames for every scroll jack. So in my instance the setup kind of looked like: <lottie-player mode="normal" src="/your-lottie.json" style="width: 100%" > </lottie-player> let player = document.querySelector('lottie-player') let animation = player.getLottie() let playhead = { frame: 0 } let tl = gsap.timeline({ defaults: { duration: 1 } }) tl.to(playhead, { frame: (Whatever frame you want the animation to scrub to) || animation.totalFrames, duration: (however long you want it to take) || animation.totalFrames, ease: 'none', onUpdate: () => animation.goToAndStop(playhead.frame, true) }) // add in whatever other timeline actions you need to do after this, and continue chaining ScrollTrigger.create({ trigger: selector, pin: true, start: 'top top', animation: tl, scrub: 1 }) I was having trouble figuring out how to use the LottieScrollTrigger in a timeline the way I needed to so I had to use the regular scroll trigger. Essentially I wanted to pin the element when I got there, scrub through a bit of the lottie animation at a predetermined point, show something else, scrub to another predetermined point, show another thing, then finish the animation. So here we're using the playhead variable with a frame property and on update from the scrub we're making the animation go to that point from the playhead. This worked well in all browsers other than iOS, it was flickering and that was because all frames were not loaded initially and being loaded at the instant scrolling occurred. Instead you'll want to load the lottie animation in with JS player = lottie.loadAnimation({ container: lottieElement, // element you're injecting the lottie into renderer: 'svg', loop: false, autoplay: false, path: lottiePath // the path to the animation json }); player.addEventListener('data_ready', () => { // do all your GSAP stuff after the data is loaded }) This will load the entire animation and stop the flickering

Thanks @luisalbertom -- really appreciate all the info here. Doesn't get me much further with the transparency issue on iOS, but does help me understand what is more important. Thank you

Updating here again with some issues encountered. So this worked great for the most part. Unfortunately, iOS does not play nicely with .webm files. Doesn't work at all on iOS. I ended up following along with this tutorial from CSS tricks that seemed to address the issue of transparent video not playing on iOS: https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support/ Unfortunately, though this does work in getting playable video with transparency working on iOS, the original issue has returned. When exporting from FFMPEG with their line: ffmpeg -framerate 25 -i unscreen-%3d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 output.mov The codec and pix_fmt they use is incompatible with their -crf parameter (Constant Rate Factor), which as specified above is very important to the rate of how the video is scrolled through. And as I understand the article, this pix_fmt is necessary for Finder to recognize it and be able to reencode it. I'm at a loss of what to do. I have little to no knowledge of video encoding, and was very happy I was able to get it working previously. If anyone has any ideas, I'm not entirely sure how the Constant Rate Factor effects the animation, it seems to be in reference to frames from the post above but when I search it up it only seems to reference resolution: https://ottverse.com/cbr-crf-changing-resolution-using-ffmpeg/ I'm at a loss of what to do on iOS

Just wanted to comment here. I had a video that was transparent and in the webm format. Had to use some different settings in ffmpeg: ffmpeg -c:v libvpx-vp9 -i ~/Downloads/Transparent_video.webm -movflags faststart -crf 23 -b:v 0 -c:a libvorbis -g 1 -pix_fmt yuva420p output_transparent_video.webm Had to use a different video codec that supported transparancy (libvpx-vp9) and insert it before the input, and the pix_fmt has to be yuva420p not just yuv420p Hope it helps someone! Thanks for all the info in the thread everyone.