Jump to content


Again Airpods Animation -> ipad not smooth

Recommended Posts

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);

gsap.to(thegate, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    scrub: 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.





Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.





Link to comment
Share on other sites

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 ;)

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.