an unexpected shake effect while animating

[digital flax]

hi ! i'm tryna make a splash animation for a mobile app, but a supposed static object is shaking when i play the animation, like moving from some pixels to the right or the left each frame and idk why

i can't send any screen shot / recording

[elder hornet]

Please verify #verification t add media

[icy jackal]

Hey @digital flax , a possible reason to why it might be shaking is if your different frames are different in height and width, so ultimately the object is not always at the same x, y coordinate. We can try to look into your problem more if you share images of your setup / editable link to your file.

[digital flax]

hey ! thank you here is my file, it would be surprising that my frames differ bc i really just copy pasted the first one everytime

here is how it looks like

[icy jackal]

for some reason on my laptop im not good with importing in figma files. could you share an editable link?

[digital flax]

what is the difference ?

[icy jackal]

click share in the top right

make sure it says can edit

then click copy link

[digital flax]

https://www.figma.com/file/f8QdX3T6Hi4OeidbDvcKwP/Untitled?type=design&node-id=0%3A1&mode=design&t=0XNQzJDB7F96Ij99-1

thank you i'm new on figma 🙂

[icy jackal]

Hm, at first glance it all looks good in terms of height and width and positioning

I'll look into it a bit more later when im more free to see if i can see what might be causing it. But at first glance it looks alright

(though i know in the presentation there is something going on)

maybe @elder hornet will find something before me

[digital flax]

thank you very much for your implication, and yea it s kinda confusing

[elder hornet]

yeah the Group 1 seems to be the same width/height and at the same x/y value on every frame. every frame is the same size. I checked every layer on every frame and they are all exactly the same height and width and in the correct xy once they take their place. I think its the "triangle" layer. even though its the same size and its in the "same place" its very large and just a little movement could throw the gradient off, even if its off but just what they round the pixels too. i put the gradient onto the frame as a fill and turned off visibility of the triangle on all the layers and i think its not moving but ive had so many coffees today i may just be shaking at the same rate. i made a new page called COPY so i could reorgnize some of the layers, look at the preview in there and lmk if that helped or if its still shaking.

which if thats the case, youll just have to readjust your gradient to get the same effect

[digital flax]

hi ! i didn’t really understood what u did but u might be right the problem could come from the triangle

but when i preview nothing has changed, still the shaking effect

[digital flax]

@elder hornet did u do ur modifications in my file or in a local copy of your device ?

[icy jackal]

It is in your file on another page. If you look in the left upper corner you can select different pages

@elder hornet basically applied a gradient to the main frame and turned off zhe visibility of the triangle

So basivally, you can just delete the big triangle of colors and just apply some color on the main frame itself

[digital flax]

oh i found it, but the problem is still here sadly

[icy jackal]

I didnt check @elder hornet ‘s but i tried it out also (deleted after i saw that hart also made an example) but it worked okay for me.

I just duplicated your stuff, deleted the triangle from all the screens. Then i applied a random blue color to your frames

[digital flax]

deleting the triangle delete the animation where it gets bigger and cover all the background too, which was pretty smooth imo

[icy jackal]

Sure, im just saying that when you do that it works

Hence, the triangle is the problem

You could have a more simple version of the triangle from the screen where its small and gets bigger

But use just a normal bg where the letters come in

Evidently, the triangle is what causes that small little shake at that point.

[digital flax]

(idk why the format of the preview in the copy page is different)

look, the mountain actually don't shake anymore, but the letter still

its @elder hornet version

[icy jackal]

I assume the format is different because of the no triangle thing

[digital flax]

when i say format i was saying like there is no an iphone image around the screen when i display it haha, but u see that letters still shaking right?

[icy jackal]

Yeah i had to watch it a couple of times tho to find the shake

The format is different because no device is selected in the prototype menu

[digital flax]

oh yes thx fixed that

so you have no idea of where this could come ?

[icy jackal]

lemme check

[icy jackal]

okay, so i found that this version is not shaking

so i figured that maybe the extra lines are the problem

i made a version where the whole thing is just 1 vector (instead of multiple of lines)

but then it is shaking again

then i also made a vesion where it is still a tall one but one bit more simple one vector, but it is also still shaking

i wonder if this is something on figma's end being a bug. @elder hornet might find something again that could solve your letter pproblem, but it might be good to report to figma also as it might be a bug

(i feel like even with the rectangle stuff it should work technically)

[digital flax]

okay thanks a lot, reaaly. with your work i should be able to continue !

but yea pretty weird i'll ask figma to be sure

[elder hornet]

I wonder if it’s just off by a few pixels or something. It really shouldn’t be. To add the letters to their place on each screen did you manually put in x/y coordinates, paste in place, or just copy the previous frame ? You could try using the background gradient bigger than the frame and make sure to check clip-content? May not help but may be worth a try

[elder hornet]

Hard to tell but looks like the letters are moving just in the last few animation frames in this video

[digital flax]

what i did is copy+paste previous frame, and then dragged the added letter in its place on the screen, and did this 5 times

[digital flax]

yea really mysterious tbh, i asked figma directly i’m waiting for their response

[icy jackal]

@elder hornet if you delete the mountain, you can see that the letters wont move

or in one of my example where the mountain is smaller you can see it also doesnt move

so i dont think it is the placement of the letters that is the problem

[elder hornet]

Gotcha

Just pointing out im only noticing it in the last few frames on that particular video