Jump to content
Search Community

Again Airpods Animation -> ipad not smooth

SteinbachDigital test
Moderator Tag

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

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

  • 1 year later...

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