blakel.

I found the solution. I have no idea if it is supposed to work like this but somehow it works. I leave a comment here for people who has the same issue. There are 3 tips here to solve the problem: 1. gsap.registerPlugin can be called outside onMount() 2. Custom scroller and scrollProxy have to be setup inside onMount() since they need a target element 3. Mounting order is a bit different. Children mounts first then parents. It is intuitive that scroller and scrollProxy should be configured in the onMount() function on the top level which is something like App.svelte. Therefore, initiating animation or scrollTrigger events inside onMount under child does nothing since the scrollProxy is not yet setup. Children are mounted before parents. The workaround is to wrap the animation in the reactive block $: {...} and make sure that your block will not be triggered again by any state changes.

Hi, I am using Svelte in a project and a library called smoovyjs to handle scrolling interactions. Everything worked well until I tried to use scrollTrigger. I found many examples for other scrolling libraries like locomotive-scroll but I couldn't found any related fixed for my case. I hope if someone here can help me out. I chose this smoovyjs library because it solves multiple use cases at once though it is not actively update. The library simply attaches two layers under the targeted div to scroll hijacking. Then when you scroll, transform3d applies and moves the div up and down. Here is a demo, https://svelte.dev/repl/68c6336850824771b4618c724cebe351?version=3.49.0 You can see that the markers are not moving when scrolling. It is supposed to move the section up when the element is in-view. Appreciate any help.