How to use ScrollTrigger for elements that are scrolled using transforms

[anomie 2 Likes (Newbie)]

Hi there. I'm a Japanese creator. Please forgive me for my poor English.

 

Thank you for adding the ScrollPlugin.

I wanted to add heavy scrolling to the site and give users a special experience.
The way to do that is to use document.addEventListener("wheel") to detect how much power you scrolled from event.deltaY and process the value and transform the container class to How to move it.

 

However, we could not benefit from scrollTrigger in this way.
 

How can I benefit from ScrollTrigger?

 

What I want is a way for scrollTrigger to work using the code I wrote in codepen.
Wise people, please tell me how to solve this problem.

See the Pen BaKxBez by usagino (@usagino) on CodePen

[Dipscom 3,373 Likes (Superhero)]

Hello anomie,

 

Welcome to the forums!

 

There is no need to apologise for not being a native English speaker. There are plenty of us here.

 

The problem with what you are asking is that you want to use ScrillTrigger but you are hijacking the scrolling and preventing it from happening by using transforms. As no scrolling has happened, ScrollTrigger has no way of doing anything as, no scrolling has happened.

[akapowl 5,481 Likes (Superhero)]

 

Hey @anomie - welcome!

 

I can not tell you anything on the actual implementation, but

 

ScrollTrigger.scrollerProxy()

"Allows you to hijack the scrollTop and/or scrollLeft getters/setters for a particular scroller element so that you can implement things like smooth scrolling or other custom effects."

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

Maybe this might help.

 

Note that .scrollerProxy() was added in v3.4.0 - so you'd have to update in your codepen.

 

[ZachSaucier 7,162 Likes (Superhero)]

.scrollerProxy() is the way to go. You just need to connect a getter and (and optionally a setter) for your custom scroll position. The documentation that akapowl linked to shows a few examples of connecting it to various smooth scroll libraries. It'd be similar for your custom script.

[anomie 2 Likes (Newbie)]

Everyone is so kind. Thank you.

We don't have such a friendly forum in Japan.

I had never heard of the Smooth-scrollbar package before and I was foolishly trying to make my own version of it. This is a re-development of the wheel.

I'm going to peruse the documentation for ScrollTrigger.scrollerProxy().
Thank you so much.

@Dipscom @akapowl @ZachSaucier

[Dipscom 3,373 Likes (Superhero)]

3 hours ago, anomie said:

We don't have such a friendly forum in Japan.

 

How come? To the outside world the Japanese have the reputation of being respectful and honourable. Surely that would translate into a pleasant environment.

 

I guess one could say the grass here is very green.

 

And now that you are using words like "peruse", you cannot claim to have poor English language skills.

[anomie 2 Likes (Newbie)]

Japan is only polite to the outside world.
The Japanese have a rural, totalitarian mindset and are hard on their people.
And this text is written using DeepL translation.
Glory to the DeepL translation 🙌🙌🙌

[Dipscom 3,373 Likes (Superhero)]

I understand. It's like that everywhere. To the ones outside it's one image, to the ones living in it, it's a different reality. I have a friend whose father lives in Japan (they're originally from the UK). He told me that, in Japan, there's this view the japanese are above the foreigners. They will treat you politely to your face but to your back they will refer to you as less than them. I've never been to Japan, all I know of it and its culture if from consuming Manga and TV shows and films from it.

 

As for the DeepL, give the below for it to translate and let me know if it makes any sense. It shouldn't as it's just a tongue twister and it isn't even in English.

 

Três pratos de trigo para três tigres tristes.