OSUblake

Pretty sure that would involve some sort of scroll jacking. What you're basically asking for is a way to pause scrolling, which isn't possible unless you hijack the scroll.

Reference - computed property names https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names

Do you mean like this? https://codepen.io/osublake/pen/3dd173c4c827fa0a33bea4aaa8e686a2

Like I said, mask support is meh for HTML elements. You need to go all SVG. https://codepen.io/osublake/pen/29cfa0e0a2a25b403dcd15c365096996 If you're new to SVG animations, @PointC has some fantastic tutorials... https://www.motiontricks.com/

This should put you in the right direction. Basically, the horizontally movement is a paused animation, and we just set the progress of that animation to the ratio of how far it's been dragged/scrolled. https://stackblitz.com/edit/angular-ivy-qjqa2k?file=src/app/app.component.ts

Can you put that in a demo? I've never used mask like that because support is meh. Usually go full-on svg.

You probably shouldn't be animating left as it's not a transform. Just use xPercent. https://codepen.io/osublake/pen/a8f0ea008f87c51c94165aef32dc0550

How so? Just animate 3 different shapes. A stagger is just a delay, or you can use different speeds, i.e. durations.

You need to load the text plugin. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/TextPlugin.min.js

It's best to set the opacity to 0 in your css and then animate to an opacity of 1. That will prevent the flash, which is caused by the delay it takes for the JS to load. So change the .from() animation to a .to() animation.

This can't be good. Choose one or the other. opacity: 0, autoAlpha: 1

All functions must be arrow functions that include arrow functions. Everything must be a one liner. TBH, I'm actually surprised at how smooth that animation is using setTimeout.

Oh, I just noticed that it says it waits 200ms.

https://codepen.io/osublake/pen/68b071c8c8d2979b8086838dde4d267c

Is there more than 1 <lottie> component? If so there needs to be an array if you're trying to play each one individually.

Yeah, I figured that, but I didn't want to complicate it more. So instead of setting the opacity of every card to 1, just set and animate the cards you want visible. https://codepen.io/osublake/pen/8380c56a4271a063d36ec1cca59fb2ca

codesandbox is a good place for Vue. https://codesandbox.io/

Where does anim from? According to that code there is only 1 lottie animation, correct? A demo would go a long way and save us both time.

Yep. That's why I said it might help to check for the size of the screen, or maybe something like this. https://github.com/kaimallea/isMobile I'm pretty sure that a laptop that has a touch screen shouldn't have any issues.

You keep adding more animations to the timeline on every click. Just make the animation once. https://codepen.io/osublake/pen/e1a92bc3b9375cf74e6599da197fc6b0

I really can't help without seeing what this.playLottie looks like and the context of your code. Can you make a really simplified demo?

Have tried using refresh after setting the height? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() There's not a lot of good solutions. The best I've come up with is to also consider the screen size, or to initialize all the fancy animations after the first mousemove or wheel event.

You can put it on codesandbox. It looks like you're debouncing the height change, so it's not going to be in sync with ScrollTrigger's refresh. Also, this is a faulty assumption. My computer would be considered a touch device because I have a touch screen, even though I'm using my mouse. And browser vendors removed "ontouchstart" from the window object because of assumptions like this. function isTouchDevice() { return ( "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ); }

What does this.playLottie look like? If it expects an index, just pass it in. onEnter: () => this.playLottie(i)

Love the naming! $(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy") That reminds of more bad jQuery stuff. Always using class names to keep track of state. if ($(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy").hasClass("active")) { ... } else { $(".l2-ht-gr-001-bnew-iewq-4g7-kl3478-vqw-kl09-alewq-63rt-copy").addClass("active"); }