Slight offset with ScrollTrigger pin and LocomotiveScroll

[Lousticatus]

 

Hello community! So, I'm using React, GSAP, and LocomotiveScroll. When I scroll, sometimes there's a kind of focus shift on the text if, for example, I translate it on the y-axis. Most often, a 0.1s transition in the inline style of the target element fixes the issue. Rarely not. Additionally, on a specific element, a banner with text that translates on the x-axis, a slight offset occurs between each scroll. The text seems to increase by 1px, then goes back down by that pixel once the scroll progress is completed, and there's still that notorious focus shift that blurs the text. This latter issue happens on a section that I pin with ScrollTrigger. I've created a minimal demo on CodePen, but I have a problem I can't solve with the operation or import of Locomotive Scroll in my App.tsx (possibly a TypeScript syntax issue that I'm not familiar with), so the demo isn't effective, but I'll share it. Thanks.

 

https://stackblitz.com/edit/stackblitz-starters-9py85q?description=React TypeScript starter project&file=src%2FApp.tsx,src%2FLocoScrollHook.js&title=React Starter

[Lousticatus]

Issue resolved. I had a `will-change: transform` in my _base.scss file for Locomotive Scroll. No more offset or shaking. However, now when I scroll back up after the pinned element, there's a latency before the section's color takes effect. During this time, the body's color is applied.

[Lousticatus]

https://stackblitz.com/edit/stackblitz-starters-9py85q?description=React TypeScript starter project&file=src%2FApp.tsx,src%2Fstyle.css,src%2FLocoScrollHook.js&title=React Starter

 

 

Here's a minimal demo. Locomotive Scroll isn't configured; I can't manage to do it. The issue doesn't occur in the minimal demo, so it must be related to Locomotive Scroll.

[Rodrigo]

Hi,

 

Yeah unfortunately Locomotive is not a GSAP product and we don't have the time resources to provide support for it. Although @akapowl one of our superstars here in the forums shares some great insight on using Locomotive in general and with React in this thread:

 

Also you'd like to check this threads as well:

 

Finally GSAP has it's own smooth scrolling solution: ScrollSmoother

https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

Here is a demo in React:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2

 

Hopefully this helps.

Happy Tweening!

[Lousticatus]

I succeeded, finally. What I understand is that applying a 0.1s transition in the inline style is necessary for Locomotive Scroll to remain smooth and not stutter during scrolling, especially for discerning eyes. Additionally, from my understanding, favoring divs over spans seems to result in less pressure during scrolling, perhaps due to the block aspect rather than inline-block. Even though you can set a span to display: block, divs might offer a smoother scrolling experience. Moreover, occasionally, and with caution not to overload the browser, I use the willChange: "transform" attribute in the inline style. These measures seem particularly effective for addressing minor shakes and offsets, especially with text elements.

Regarding the issue with background-color of sections and text invisibility, applying perspective in the Locomotive Scroll _base.scss file, to the [data-scroll-container], simply add perspective: 1px;.

 

Don't worry at all about the lack of support for Locomotive Scroll in GSAP; the free tools are already excellent. As for the GSAP smooth scroll, yes, I'm aware, but it's a licensed option, correct? I also wanted to know, the license with all GSAP tools, is it a license that one can use for commercial websites? And how much does it cost and for how long does it work? I'd like to learn more.

 

And thank you for the links and the response !

[Rodrigo]

1 hour ago, Lousticatus said:

And how much does it cost and for how long does it work? I'd like to learn more.

The normal license covers all the bonus plugins' updates for a year. If you don't renew your subscription any project with the bonus files will just keep working, you just won't have access to the latest updates after your license expires. You can check the prices here:

https://gsap.com/pricing/

1 hour ago, Lousticatus said:

I also wanted to know, the license with all GSAP tools, is it a license that one can use for commercial websites?

A commercial license is needed if one or more of these conditions are met:

• Your site or product requires a fee to use or join. Examples: NetFlix.com, Ancestry.com, eHarmony.com - E-commerce sites with paid members only areas that use GSAP
• You use GSAP in a game, product or themes that is sold to multiple end users Examples : Banner ads, Theme templates sold on Creative Market, paid Webflow Cloneables
• Your game or app is paid or uses micro-transactions for optional features/upgrades. An example of a micro-transaction is when a user can optionally pay to unlock a certain feature in a free game/app, or a gambling site where the user can technically visit for free, but they may choose to pay to place bets or play games.

Our entire licensing model is based on the honor system and a simple number-of-developers pricing structure. You don't need to enter some API key for every site you use it on or anything like that. It's very simple, and we fully recognize that. We also trust that most people want to do the right thing and honor the work of other developers. We aim to treat others the way we'd want to be treated and we believe that if we serve well, the market will recognize and reward that by joining Club GSAP eventually. 

 

And to be clear, if your membership expires, nothing will change on your client websites. We don’t inject “phone home” scripts to verify your license status. Functionality doesn’t suddenly stop upon expiration. Inspect the code for yourself if you’d like to verify (that’s why we provide the raw source code). 

 

Of course we ask that you not expose your token in a public repository, for example, or share the members-only plugins. 

 

Let us know if you have more questions on the subject.

Happy Tweening!

[Lousticatus]

Your response is impeccable. Don't worry about any sense of honor with me. Moreover, I completely understand the necessity and normality of earning money for the work done. It's the very essence of evolution that comes with rewards. Your tools are excellent, so as soon as my finances allow, after getting my first clients, I'll purchase the license. Thank you.

[Lousticatus]

So it would be the premium license, is that correct ?

[Rodrigo]

Yep, the Premium Membership gives you access to all the bonus tools.