Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
anomie

How to use ScrollTrigger for elements that are scrolled using transforms

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

 

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.

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

.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.

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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. :D

 

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

Share this post


Link to post
Share on other sites

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 🙌🙌🙌

  • Haha 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

×