Jump to content
GreenSock

blakel.

Using scrollTrigger with smoovyjs library in Svelte

Recommended Posts

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.

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or support for 3rd party libraries.

 

Have you considered using GreenSock’s ScrollSmoother? It is tightly integrated with ScrollTrigger and fully supported. 

 

Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×