Jump to content
Search Community

Need help~The scrollTrigger does not work properly when the custom scroller is rotated by GSAP.

ice-frog test
Moderator Tag

Recommended Posts

My project is landscape, 1624x750.
But in my project, I have to rotate my scroller depending on whether the phone has auto-rotate enabled or not, e.g., if the user does not have auto-rotate enabled, I have to force the scroller to rotate 90 degrees.
Is there any way I can solve this problem?
need help~

 

Link to comment
Share on other sites

I turned on the "markers" option and found that the "start" and "end" positions of the elements were normal in landscape, but when I rotated the scroller, they are not positioned properly and seem to be squeezed together. Here is my screenshot

 

normal:
normal.jpg.2485a8dc5badb6d03ec45ef4e31ff115.jpg

 

abnormal,with the "scroller"element rotated 90 degree~

error.thumb.jpg.608fcd8aa41704239bb5aa0dc1baf678.jpg

 

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Hey ice-frog. How are you rotating your scroller element? Can you please try to create a minimal demo for us to take a look at?

 

Neat animation by the way. I love the visual style!

Thank you very much for your enthusiasm, ZachSaucier~
Here's my minimal demo.
When your window is landscape (window.innerWidth>window.innerHeight), everything works fine.
Try to resize your window, when your window is vertical (window.innerWidth<window.innerHeight), the error occurs, you can see that the position of "markers" is also misplaced.

Link to comment
Share on other sites

The main issue here is that you can't just rotate a scrollable element and expect it to scroll in the direction of the opposite axis. All the rotation property does is change how an element is visualized, not how it functions (i.e. horizontal scroll rotated 90 degrees won't turn into vertical scrolling). ScrollTrigger has no way of knowing that you're actually trying to use scrolling in the opposite direction because the scroller is still on the same actual axis.

 

If I'm understanding your end goal correction, you will need to change your entire layout to work with the opposite direction (meaning the CSS for your layout), kill off the old ScrollTriggers, and create a new ScrollTriggers with horizontal: false (adjusting the start and end values as necessary). You shouldn't be using rotation at all. 

  • Like 2
Link to comment
Share on other sites

27 minutes ago, ZachSaucier said:

The main issue here is that you can't just rotate a scrollable element and expect it to scroll in the direction of the opposite axis. All the rotation property does is change how an element is visualized, not how it functions (i.e. horizontal scroll rotated 90 degrees won't turn into vertical scrolling). ScrollTrigger has no way of knowing that you're actually trying to use scrolling in the opposite direction because the scroller is still on the same actual axis.

 

If I'm understanding your end goal correction, you will need to change your entire layout to work with the opposite direction (meaning the CSS for your layout), kill off the old ScrollTriggers, and create a new ScrollTriggers with horizontal: false (adjusting the start and end values as necessary). You shouldn't be using rotation at all. 

Thank you for your reply and explanation, but I have some small questions, although I rotated the scroller, but the actual axial direction of the scroller did not change, only visually, as you said, "scrollTrigger" corresponding to the direction also did not change, but I also did not change the "horizontal" parameter of "scrollTrigger" (always true), then why the "start" and "end" position of the trigger will change it, it will always maintain the horizontal direction corresponding to it?

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

ScrollTrigger takes transforms into account when calculating positions for the start and end. So when the parent container is rotated the start and end positions differ.

Thanks, it would be nice if ScrollTrigger could add a parameter for scroller container rotation, because when users browse landscape content on the phone, we can't guarantee that their phone has auto-rotation turned on, it may be locked, in that case, the most convenient way is to rotate the scroller container directly, otherwise we still have to prompt the user to turn on auto-rotation first, and then browse landscape.

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

Why not adjust the CSS as necessary instead of rotating the container?

Because lock the phone screen and then landscape view the page (actually still vertical, the page will not rotate, although visually horizontal, I do not know if I have made it clear), all the sub-elements have to rotate 90 degrees, or use photoshop to pre-rotate the picture and other elements, and then re-arrange with css, very tedious. Well, there is certainly no such need on the PC

Link to comment
Share on other sites

On 12/11/2020 at 1:34 AM, ZachSaucier said:

Why not adjust the CSS as necessary instead of rotating the container?

Finally, I solved this requirement, I checked and read the source code of ScrollTrigger and found that ScrollTrigger is using getBoundingClientRect ( ) to get the coordinates of the trigger element, I found the key point, I added some code to the _getBounds() function to determine if the scroller parent container is rotating, by reassigning the correct coordinate values and returning them, everything works fine~
I would like to thank gsap, and ScrollTrigger, for making my project a pleasant experience, thanks~

  • 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.
×
×
  • Create New...