Scroll jumps to end of page after killing animation (iOS only)

[Yannick_SG]

Hey guys,

tomorrow my client is releasing a new product, where I used GSAP to create an animation for the layer of their product.

 

After the animation is done, I kill the animation for 2 reasons:

1. If the user wants more information from the top of the page, they dont have to go trough the whole animation again.

2. (The bigger reason) AFTER I went trough the animation on mobile (iOS and Android) the site jumps up and down a little bit. I don't know why, that 's also why it was easier for me to just deactivate the animation.

 

But just realised, that on iOS, after the animation is killed, it jumps to the bottom of the page and I just can't figure out why. I tried:
- To delay the killing with 500ms
- To use onLeave and onLeaveBack instead of the scroll - EventListener

- Use .disable() instead of .kill()

 

I also have an recording of the issue from the client: https://drive.google.com/file/d/13_HD1wEbrJFS4YrrE-yAbguQ-j-9IevF/view?usp=drive_link

I personally don't have an iPhone, so I have to use an Simulator Demo (appetize.io)

At first, I thought its an WordPress/Elementor issue (To the page), but I also have the issue on CodePen. It seems to me, .kill() is not the reason of the problem, but the whole "jumping around" after the animation is finished.

 

I hope I was able to give you all enough information, I didn't expect to find this issue at the end of my day.

See the Pen MWZrQyN by yannick-gallist (@yannick-gallist) on CodePen

[Rodrigo]

Hi,

 

I'm on my phone now so I can't really fiddle with your codepen example.

 

At a quick glance it's odd to me that you're doing all those checks to see if an element is in the viewport or not . Why not use ScrollTrigger for that?

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

 

Also ScrollTrigger has a once configuration that allows you to setup an animation that runs only once when scrolling down:

 

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Hi,

 

I had a chance to review your code and this is quite wasteful in terms of adding an active class:

onUpdate: (self) => {
  let index = ((self.progress * 10) / 10) * 8;

  if (index < 1 && activeText !== 0) {
    activeText = 0;
    descriptions[0].classList.add("active");
    descriptions[1].classList.remove("active");
  } else if (index >= 1 && index < 2 && activeText !== 1) {
    activeText = 1;
    descriptions[1].classList.add("active");
    descriptions[0].classList.remove("active");
    descriptions[2].classList.remove("active");
  } else if (index >= 2 && index < 3 && activeText !== 2) {
    activeText = 2;
    descriptions[2].classList.add("active");
    descriptions[1].classList.remove("active");
    descriptions[3].classList.remove("active");
  } else if (index >= 3 && index < 4 && activeText !== 3) {
    activeText = 3;
    descriptions[3].classList.add("active");
    descriptions[2].classList.remove("active");
    descriptions[4].classList.remove("active");
  } else if (index >= 4 && index < 5 && activeText !== 4) {
    activeText = 4;
    descriptions[4].classList.add("active");
    descriptions[3].classList.remove("active");
    descriptions[5].classList.remove("active");
  } else if (index >= 5 && index < 6 && activeText !== 5) {
    activeText = 5;
    descriptions[5].classList.add("active");
    descriptions[4].classList.remove("active");
    descriptions[6].classList.remove("active");
  } else if (index >= 6 && index < 7 && activeText !== 6) {
    activeText = 6;
    descriptions[6].classList.add("active");
    descriptions[5].classList.remove("active");
    descriptions[7].classList.remove("active");
  } else if (index >= 7 && activeText !== 7) {
    activeText = 7;
    descriptions[7].classList.add("active");
    descriptions[6].classList.remove("active");
    animationCompleted = true; // Status-Variable
    console.log(animationCompleted + ": wurde umgestellt");
  }
}

Running all that on every update of ScrollTrigger is quite excessive IMHO. The approach in these examples seems better:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Yannick_SG]

Hi Rodrigo,

thanks for the input! I shortened the "onUpdate" part and am using "isInViewport" now.

 

I tried the "once" part and it indeed wouldn't jump anymore, but resetting the animation, so all layers are visible is important, and also on mobile you have a lot of empty space to scroll up.

 

It seems to me, the issue is, that after I kill the animation, the page height changes again too (which is obvious to me now), visible when you open the page with phone dimensions:

loom recording.

 

But on Android it still keeps the same position, iOS seems to save the distance scrolled and want's to correct it, when the page height changes. I have really no clue, on how to solve that, so I will deactivate the animation for iOS for now.

If someone else a tip for me, I would really appreciate it!