Smart animation doesn't work with fix scroll position

When I try to use the new beta feature “Swap component” using smart animation transition
And fix the scroll position of that component. the animation jump down then up and doesn’t do the smart transition. I know it is still in beta but i want to shout out for feedback

7 Likes

Can you share an example file?

@Gleb I made that prototype to show the case
Expected behaviour

  • Click on the red element it will shrink in size and expand keeping the position of the element
    What happens
  • the element jump in the page and come back up again while doing the animation
    Figma
1 Like

Hi everyone, i have found this post after experiencing the same problems with “smart animate” and “fix position when scrolling”. It seems this bug still exist. I have found an “unpolished” solution: use “instant” instead of “smart animate”.
It’s not very nice to see it but it’s better than nothing! :joy:

2 Likes

@Agnese_Martinuzzi thanks for the tip.
bug still exists july 2022. leaving a comment so this thread will stay afloat

4 Likes

Agnese_Martinuzzi
Hello iam here to help you

I think your problem is quite common

So here is the fix.

Frame the thing what you have to animate
And resize that as your mainframe size
Do the same on next frame

Your compound = your main frame
Eg: main frame w:270 h:1980
Compound w:270 h:1980

And here you go!

I explained this clearly.
Hope you understand.

1 Like

Agnese_Martinuzzi
Hello iam here to help you

I think your problem is quite common

So here is the fix.

Frame the thing what you have to animate
And resize that as your mainframe size
Do the same on next frame

Your compound = your main frame
Eg: main frame w:270 h:1980
Compound w:270 h:1980

And here you go!

I explained this clearly.
Hope you understand.

I think I’m having the same problem, though “fix scroll position” does not seem to be an option with smart animate. I’m using a component at the bottom of the frame to simulate tabs, and most of the times I click on a tab, the prototype jumps to the top of the frame for a second, before returning to the tab component. All of the elements repeated between variants of the component have the same labels, and the sizes are the same, so I have no idea what is causing the problem.

I’ve discovered a very simple workaround—simply contain the component in a frame and put the fixed position property on that instead of directly on your component.

5 Likes

works like a charm! Thank you so much :pray:

1 Like

Aric, I still don’t get it, can you explain in more detail please or someone???! HELP

Hey Jason, I’ve attached an image showing the layer set up, hopefully this helps.

3 Likes

you’re a genuis. thank you! this bug was driving me crazy.

Nice it works thanks!

1 Like

@agenaidy you are my hero!!! THANKS!

OMG. This helps me a lot. BIG THANKS