Jump to content
GreenSock

De.Minov

ScrollTrigger restart the animation when resizing if...

Recommended Posts

I apologize for the incomprehensible title, which is likely to mislead, but I do not know how to formulate it correctly.

 

In general, I have a task to divide the page into "two screens", the first with a minimum height of `100vh`, while it can stretch in height.

The second one can already be any height, but by filling the content it is still more than `100vh'.

 

The transition between screens should be similar to FullPage Scroll plugins.
In general, I have implemented what is required, but I ran into a problem on mobile devices (and sometimes it is reproduced when changing the size of the viewport on desktop).

 

The problem is in the interface elements in mobile browsers, which are animated when scrolling and in fact trigger the `resize` event.
And it happens that the scroll passes the trigger and one of the animations (goToPer, goToSec) does not work.

 

And the question is, is it possible to somehow "flip" to the nearest trigger when refreshing, or to start an animation?

 

----
P.s.
I read a couple of topics on your forum and took into account one of the moments with the imitation of `vh` via JS. She helped solve the problem with `refresh()`, thanks for that :)

See the Pen jOZNOXB by de-minov (@de-minov) on CodePen

Link to comment
Share on other sites

Welcome to the forums @De.Minov

 

I'm not seeing any issues in the demo, but maybe I'm not doing it correctly. 🤷‍♂️

 

If you don't want ScrollTrigger to refresh on resize, you can tell ScrollTrigger what events to refresh on with autoRefreshEvents or to ignoreMobileResize with ScrollTrigger.config().

 

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

 

Link to comment
Share on other sites

Basically, the problem is observed on mobile devices.
Here is a video, from 15 seconds you can see how the trigger during the resize (due to the offset of the browser address bar) ignored the transition I wrote about (analogous to FullPage), which is why some animations related to the transition did not work and had to be scrolled "manually".

Link to comment
Share on other sites

I tried to limit resize, but this is unnecessary, on the contrary, due to the constant change of `s1` (from the snippet), it is required to constantly "track" the size.

As for the units of measurement, this is also not the case..
It seems to me that when refresh() is used, it is necessary to check where `start` is relative to the center of the screen and "send" it to the nearest "screen"

Link to comment
Share on other sites

10 minutes ago, De.Minov said:

It seems to me that when refresh() is used, it is necessary to check where `start` is relative to the center of the screen and "send" it to the nearest "screen"

 

You can listen for that.

 

ScrollTrigger.addEventListener("refresh", () => {
	if (someCondition) {
    	goToPer();
    } else {
    	goToSec();
    }
})

 

Link to comment
Share on other sites

5 minutes ago, OSUblake said:

 

You can listen for that.

 

ScrollTrigger.addEventListener("refresh", () => {
	if (someCondition) {
    	goToPer();
    } else {
    	goToSec();
    }
})

 

Yes, I think I will.
Thanks for the help)

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