Animations in preview jump to the top of the page and then back down

So!

I keep running into a problem where my animations instead of playing in preview mode the viewport jumps to the top of the page for a breif second then back to where i was… missing the animation and just seeing the end result.

Please someone tell me this is just a human error and i can resolve it :slight_smile:

2 Likes

I’m having the same issue … Anyone have any ideas?

Is it possible that it has something to do with a page using a lot of elements and components? When I do a small test of the same animation it seems fine, its only when I try to animate a large accordion for example, with tons of details inside.

Same thing here. I have interactive components for each item on an accordion. When I click on any item on preview mode, the whole page blinks abd shows the top of the page for a second. Then it blinks again and returns to my accordion section.

Looking at other forums I was able to “fix it” by making the height of my accordion container fixed, versus “hugging the contents.” It is better than blinking… but, obviously it is not a fix… since now the bottom of the accordion gets cropped (behind the section below) when items are open. Did anybody find a real fix for this?

I might have a fix, although not to sure as to why its started to do it. You’re main frame (device frame) set it to its fixed height or desired height.

1 Like

Same issue here - I tried setting the main frame to fixed height, but that didn’t work.

I found that it happens when the animated components are in a frame with auto layout, if you eliminate it, the animation doesn’t jump to the top, I hope that helps you.

1 Like

My solution was to ensure that all variants of the component that’s being animated are the same height.

2 Likes

Can anyone tell me how to make this button like it has to be pop on to the screen when we scroll to the bottom and it stays there until we get to the bottom. And when ever we press on this button scrolls to the top but when the home or top screen hits the button should go invisible or hide somehow.

Anyone know how to make this? I tried my best using sticky and fixed and other methods so can anyone mention any of them with an example file attached it will be appreciated.

Try to set all variants to the same height

1 Like

This is frustrating because I want to use both smart animate + hug the height of the bounding frame. This is really useful especially when prototyping interactions on mobile screens. To avoid the glitch, I found a workaround. Set the animation to instant and it works fine. Looks like smart animate works if its occurs within the bounds of the surrounding frame. If smart animate is applied to a component changing the height or width of the bounding frame, it makes the animation go crazy.

Okay found another thread where it appears they are working on it