Converting exact animations from desktop to phone (FRAMER API)

Question

so I encountered with the weird problem. So I'm using React and animating page with FRAMER API. So what I'm doing: On specific ScrollY, let's say 900, some animation pops up. However, when there's a flexbox, it looks different on phone (one element in a row, while on desktop there is a 4 elements in a row). So, the exact positions on Desktop and Phone will not match, which leads that animation pops-up not in time.

Did someone encountered with the same problem and if yes, is there are any solutions to this?

Answer 1

What worked for me is setting a fixed height on the parent element one for mobile and one for desktop. You can then set the animation itself with a ternary.

Example animation:

const title = {
  hidden: {
    opacity: 0,
    y: mobile ? -350 : -250,
  },
  show: {
    opacity: 1,
    y: mobile ? 300 : 200,
  },
};