Layers animating when I have set it to no animation

#1

Have you searched the Docs and Knowledge base?
Principle Version: Version 5.9 (5020)
macOS Version: 10.14.6
Sketch Version: Version 57.1 (83088)
Description of what you need help with:
I dont want layers to animate when i have set them to no animation.
Steps to reproduce the behavior:

  1. select layer
  2. click on no animation
    3.click - and see animation

Screenshots/Sketch File/Principle file: (if applicable)

0 Likes

#2

this is a link to a video of whats happening

0 Likes

#3

If i change the layer name to something else and then change it back to what it was it wont animate any more.

but sometimes it doesnt

0 Likes

#4

I’d need to check the file itself to give you better advice, but for what I’ve seen, you have too many layers using similar names and it’s probably that they have been animated because of name matching.

Either the layers on the 1st screen have different names that the ones in the second one, or the layer names in the second screen don’t have an equal name in the 1st one, so Principle is trying to auto animate them for you.

Looking at your file, I’d recommend you to start naming layers and groups as you work on the prototype, it seems you have carried with so many similar names that don’t have a proper structure and naming system.

For example, looking at this image:
image

Why if it’s item 6, it has a head 3, image 3, button 3, bg 17, bg 18…etc?

I’d have named this differently, like this:

  • group-item6
    • group-item6-head
    • group-item6-image
      • group-item6-image-bg
    • group-item6-button-saveforlater
    • group-item6-price
    • group-item6-name
    • group-item6-description
    • group-item6-bg

This is the kind of structure I follow when naming my layers, that way I’m always sure I’m using unique names for each element, and what is “group-item6-image” in one screen is the same element in another one.

Principle adds a number after a space when a duplicated layer name is detected, so if you have a layer named ‘Rectangle 1’ and you add another layer called ‘Rectangle 1’ to the same screen, the previous ‘Rectangle 1’ will be renamed automatically to ‘Rectangle 2’, you allow and trust Principle in renaming the layers for you, specially for big projects where things can get really messy really soon.

If we could take a look to your project files, or at least to part of it (you can remove all other screens if you want and share it here) it’d be easier for us to detect the reason of the issue you are having.

Also, use components, components are a great way to reduce layer cluttering in screens and avoid undesired animations.

Hope this helps!

0 Likes

#5

Hi and thanks so much for getting back to me. I am using about 5 components for this file. I would be happy to share my file with all the screens - can i email it somewhere?

I have gone ahead and named them differently to try and solve the problem but it is still animating.

0 Likes

#6

please post the Principle file either directly here or share a dropbox/google drive link.

0 Likes

#7
0 Likes

#8

I changed some of the layer names to see if that would solve the problem but it didnt.

The best one to try is the one going from Item-Page 5 to Checkout 1

0 Likes

#9

I just checked your file, and the names for the item 1 and item 2 where completely different in both screens, this was causing the undesired animations, check in my file how I renamed them in Item-Page 5 and Checkout 1.

I reduced also some clutter by removing some unnecessary folders, if you have a text label with the price, you don’t need to have it inside a group, reducing the amount of layer names to control helps to avoid undesired animations, and always try to keep an structure when naming your folders.

I hope this helps!
R

0 Likes

#10

Hi,

I’m confused. I made the names different so that it doesnt animate. I thought that the names have to be the same for it to animate. Is that not the case? Why would it animate when there are different names?
Thanks for your help!

0 Likes

#11

for example - here i have two that are named correctly . I have them set to not animate and its still animating.

0 Likes

#12

You should read through the documentation, you can learn about animations here: https://principleformac.com/docs.html#animation

Principle animates detecting layers with same name in two different artboards and creates a transition if their properties are different (x,y, scale, opacity, etc…)

If you want something to not be animated, either you have the layers with the same name in both artboards and don’t change any properties from one to the other, or be sure that the name of the layers in one artboard doesn’t exist in the other. (but in the second case, the layers in the second artboard will simply ‘pop up’ in the screen as they have nothing to animate from)

In your case, the group name are different, and here a folder/group also has properties so be careful with that too. If you change the name of the group to be the same, it should not animate (if no properties have changed!).

0 Likes

#13

How can I set up a screenshare with someone? It seems like I’m having other issues now. I update a component and it still behaves the same. I think this would be much faster for me if I could get on a screenshare with someone. I’m reading what you’ve written and its all good except in some cases as I showed in another video - I change the name - then change it back to what it was previously and it starts working. Why would it do that?

In the case of the above example - I changed the group title and it started working - in other areas it doesnt.

0 Likes

#14

Unfortunately I’m not available for a screen share, but I do recommend you to do the following:

The main thing that Principle bases all its functionality is the auto transition feature.

If transitioning from ‘artboard1’ to ‘artboard2’, Principle will scan all layers and animate and transition those with same names and different properties.

If a layer isn’t animating as expected or it’s animating when it shouldn’t it’s because that layer has a counterpart in the other artboard with the same name and different properties.

If a layer it’s not animating it could be due to 2 reasons:

  • Either it’s layer counterpart with the same name has the same properties, so nothing changed from one artboard to another
  • Or there’s not counterpart with the same name in the other artboard, which in that case, the layer will simply ‘pop’ in the screen with no animation.

And I repeat my previous advice, name all your layers consistently, don’t leave layers with default names like ‘Rectangle 3’ or ‘Bg 17’.

At the moment is a bit of a pain in the ass when importing from Sketch if you have been using symbols as Principle break those symbols down into groups, so if you had a button with a layer named ‘Background’ and a panel symbol also having a layer named ‘Background’, Principle will break them down and rename them differently, probably calling them ‘Background 1’ and ‘Background 2’.

I suggested some ideas to @Daniel and the team to address this as working with Components in Sketch and importing to Principle becomes a hassle and it shouldn’t be that way.

The official workaround that I got from him is to ‘flatten’ the components before importing them to Principle (see Flattening Layers), but unfortunately this is not good enough for me, so I opted to use the import feature occasionally but overall build my prototype in Principle directly.

I really hope they address and offer a solution for that, but in the meantime you’ll have to be careful when importing from Sketch, because if you used 20 different symbols and all of them contain layers using the same name, things like ‘label’ or ‘background’ are very common layer names, you will end up with a mess of layer names in Principle that will create all sorts of animation discrepancies.

I hope this helps you and other that might be facing the same issues. Let me know if you have further questions.

0 Likes

#15

I really appreciate your help Shonen. I have been renaming all of my layers as I go and just powering through it.

I really wish this app had better support, honestly even though I’ve been such a huge fan and telling everyone about how awesome Princinple is, I seriously have been considering using another prototyping software just so I would have support when I need it. No one wants to have a presentation with things not working properly and have no number to call for immediate help. In the meantime thank you for taking the time to help me figure it out.

1 Like

#16

I understand there may be moments of frustration, but just remind you that Principle is just a one person endeavour so kudos to that!

Although there may be things that can be improved and workflows that could be done a bit differently, all the current functionality is working as intended, I think once you get your head around some basic concepts, everything is pretty much smooth sailing. Don’t give up!

If you have any specific problem keep requesting for help in this forum, there’s lots of people willing to help and there’s also lots of solved questions in the old facebook group, I recommend you to go there and use the search box if you find troubles with some specific thing as most of the times you can find some real good answers there.

https://www.facebook.com/groups/752853024840625/

0 Likes

#17

I didnt know that it was a one person endeavor. Wow! Okay now the forum for help makes sense. I really thought this had grown into a larger company. Well in that case definitely less frustrated and really impressed - that person should consider hiring some help and growing it maybe.

Thanks

0 Likes