Jump to content
Search Community

Problem with pin on mobile devices

scartizz test
Moderator Tag

Recommended Posts

Hi all! (sorry for google translate)

 

Faced this problem.

The landing page has several sections.
In some sections, animations are played without a pin. They just start when the scrolltrigger arrives.
In other sections, the animations are pinned and going by scroll.

 

The problem is this: if you open the application on a mobile device and scroll up / down, then the screen behaves adequately up to the pinned sections and scrolls without problems.
But if you scroll through the sections with pinned animations, and after them try to scroll the screen a little up / down with puases, the screen will jump sharply by a some number of pixels (as if viewport suddenly realizes that in fact, according to the scroll, the screen should be in a different place now)

I don’t know how to give an example, because it needs to be shown from a mobile device.

But it seems to me that such a problem should be known. But I couldn't find anything on the subject.

 

I recorded a video: https://www.veed.io/view/f576917a-e11a-4eb3-b4f1-cfbda2d0f0c0?sharingWidget=true&panel=share

 

P.S. Fixed header has nothing to do. It's the same without header.

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

Codepen seems to work fine here.

 

It matters in what order you create your ScrollTriggers, because if some have pinSpacing it will push others down, you can fix this by changing the order or call ScrollTrigger.refresh(); when they are all done loading https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

 

But it's hard to debug something we can't see or modify code in. 

Link to comment
Share on other sites

Hi,

 

One cause could be the address bar showing/hiding in the browser as you scroll. Try using the Normalize Scroll method from ScrollTrigger and see if that helps:

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

 

Also be sure to have the latest version of GSAP (3.11.3) in your app.

 

Let us know how it works.

 

Happy Tweening!

Link to comment
Share on other sites

Hello, guys.

I tried to reproduce this bug on codepen, but I couldn't.

Then I tried to apply all your hints. Non of them helped(

Then I found one more option:

onLeave: function (self) {
        let start = self.start;
        self.scroll(self.start);
        self.disable();
        self.animation.progress(1);
        ScrollTrigger.refresh();
        window.scrollTo(0, start);
      }

In first I thougt this is it! But after ScrollTrigger refresh all the animations below are disabled.

 

To be honest, I can't imagine what the problem could be. Maybe I'm doing something wrong in the first place?

I have two separate blocks inside the section, which alternately play their pinned animation. 

When the first one is played, this block goes up, the second block appears from below and plays its animation. Then also swipe.

 

So I have two timelines for each block:

 

const scrollTriggerCurtainConfig = (trigger) => ({
      trigger,
      start: 'top 10%',
      end: '+=100%',
      scrub: .2,
      pin: trigger,
      pinSpacing: true,
      anticipatePin: .3,
      repeat: false,
    })

const curtainTimelineOne = gsap.timeline({
  scrollTrigger: scrollTriggerCurtainConfig(curtains[0]),
})
const curtainTimelineTwo = gsap.timeline({scrollTrigger: scrollTriggerCurtainConfig(curtains[1])})
    
curtainTimelineOne
  .to('.about__curtain-anim1', getPos(null, -250, 2))

curtainTimelineTwo
  .to('.about__curtain-anim2', getPos(null, -250, 2))

That's all...

 

Please ignore encapsulation. This function (getPos) simply moves up element y: -250, with duration: 1.

Link to comment
Share on other sites

By the way, I thought maybe if I stop the animation after it has ended, without the ability to reverse it, it will help. But I couldn't find a safe way to do it.
How to prevent  animation with PIN from reversing after it ends? Because common toggleActions doesn't work with pin, I guess.

Link to comment
Share on other sites

If you can't reproduce it on Codepen it is probably something else interfering. I would suggest disabling some CSS and JS until you found the culprit. 

 

30 minutes ago, scartizz said:

How to prevent  animation with PIN from reversing after it ends?

 

Have you seen the once property? See the docs for more info https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".
  • Like 1
Link to comment
Share on other sites

1 hour ago, mvaneijgen said:

 

 It also sets the toggleActions to "play none none none".

When I set toggleActions for 'pinned' animation - it doesn't work at all. Animations still has reverse

Only ScrollTrigger.disable() helps. But then all animations below get disabled.

Link to comment
Share on other sites

We can't help you without a minimal demo

 

Also have you seen the once property once: true, should only play the ScrollTrigger once. 

once Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".
Link to comment
Share on other sites

1 hour ago, mvaneijgen said:

We can't help you without a minimal demo

Ah, don't worry, I completely undestand. Unfortunately, I can't reproduce it on codepen as I said. Seems like propblem is really not in GSAP but in third party scripts on the project.

 

Anyway, you guys told me a lot of interesting things and I undestood more about GSAP.

 

Thank you very much!

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