Again Airpods Animation -> ipad not smooth

[SteinbachDigital 1 Likes (Newbie)]

Hi and yes another airpods question (sorry)!

 

The animation is running fine on desktop and also iphone. but on my ipad the animation is not smooth at all.

the main difference is that I pinned the canvas.

 

const canvas = document.getElementById(hero);
const context = canvas.getContext("2d");
canvas.width = 1920;
canvas.height = 1080;
let startTop = 75;
let frameCount = 33;

const currentFrame = index => (
  `images/content/anim/hero/gate_${(index + 1).toString().padStart(3, '0')}.jpg`
);

const images = []
const thegate = {
  frame: 0
};

for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}

gsap.to(thegate, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  duration:"3",
  scrollTrigger: {
    scrub: true,
    pin:$("."+herocontainer),
    pinSpacing:true,
    start:"top "+startTop+"px",
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

images[0].onload = render;

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[thegate.frame], 0, 0);
}

hope you have any idea how to improve the ipad performance.

 

thx!

 

ToM

[OSUblake 18,475 Likes (Superhero)]

Hi Steinbach,

 

There's nothing wrong your code and canvas is super fast. My guess is that you might have some really large images that are putting too much strain on your iPad to render. And by large, I don't mean file size but the actual width and height, i.e. how many pixels are in that image. 

[SteinbachDigital 1 Likes (Newbie)]

just tried it with the original airpod images and nothing changed.

It looks more like the pin is not really "fixed". it jumps 1-2px down and then again up. and this every image change.

[OSUblake 18,475 Likes (Superhero)]

The key to figuring issues is to isolate the problem. Have you tried using a fixed container instead of using ScrollTrigger to pin it just to compare?

 

And if you're seeing jumping, you might want to try using the normalizeScroll method.

 

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

 

 

[SteinbachDigital 1 Likes (Newbie)]

found it. scrollsmoother jumps in. 

think I have to move the section out of the scrollsmoother wrapper. 

thx for pushing me to fixed position check