en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en pl en hu en de en en en pl en lt en pt en it en it en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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.
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.
GSAP Helper    42 Likes (Newbie)
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.
Share on other sites
blakel.    1 Likes (Newbie)
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.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 1
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Using scrollTrigger with smoovyjs library in Svelte
“I'm always left with my mind blown by the way in which you guys quickly identify the solution and provide answers.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream.”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“I was astonished by the speed and versatility of animating with GSAP.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.