Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Komal

Animation flickers while unmasking in middle of animation

Hello Community,

I am trying to achieve the end result in artboard 4 and the animation follows a concept where the light blue shape comes from inside of the dark blue shape and reaches above the dark blue shape. But I am getting a flickering before achieving the final state of animation. Any help would be appreciated.

 

here's the animation link: https://komal639304.invisionapp.com/prototype/ck9a9lkzf000k7b01ym8hlfb1/play

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Brittini O
InVision ambassador Brittini O , ambassador
Comment actions Permalink

Hi Komal,

Brittini from InVision Support here, we are sorry to hear that you are experiencing this animation flicker with your Studio prototype. So we can take a closer look into this for you, could you please provide us with the answers to the below questions: 

  1. Can you send over the Studio file for this prototype?
  2. What version of Studio are you using?
  3. Can you send over a screenshot of your "About this Mac", or if you are using a Windows machine - could you send over a screenshot of your Windows/GPU information?
  4. What browser/version are you using?

Once we have those details, we'll be in a better position to troubleshoot this for you.

Cheers,

Brittini 

0

Komal
InVision ambassador Komal , ambassador
Comment actions Permalink

Hello Brittini,

 

Thank you for the response. Please refer to following links for information. 

Browser: Chrome 81

Invision Studio: Version 1.28.1

here's the screenshot of macOS details: https://gyazo.com/439710e623c9dd57381b9ca8851f66e3

here's the screenshot of GPU info: https://gyazo.com/9f60914d1b454b3d4181384964848d5a

Here's the link for studio file: https://drive.google.com/open?id=1QcD1BMHml6nvVVhADZHeTiPdOQBDj6Nf 

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Komal,

I viewed your protoype via the link you provided. Awesome animation.

After inspecting your prototype, I can make a likely guess that causes the flickering before the final animation.

I noticed that the dark blue shape, light blue shape and the image beneath all have the same asset name (Path and Image respectively).
This would prevent the assets which appear on multiple artboards (artboard 1, 2, 3) to auto-link when creating the animation. Hence, the flickering.

For assets to create a seamless transition, they must be named uniquely and distinctly. 

Fix.
Consider renaming dark blue shape and its attached image on all artboards.

I hope this helps.

Regards,
Wurah.

0

Komal
InVision ambassador Komal , ambassador
Comment actions Permalink

Hi Wurah,

Thank you for the guidelines. I deleted the artboard 3 as it was unnecessary but the flickering (to be exact, its a delay or gap that exists in process where it goes from masked state to unmasked state) still exists even with unique names. 

here's the link: https://komal639304.invisionapp.com/prototype/ck9brmzad0063l5016arl61rd/play

Can you notice the delay? and it causes a similar effect like flickering of the light blue shape.

I look forward to detailed insight on this. I'm new to Invision Studio, would like to learn more about these techniques.

 

Best,

Komal

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Komal,

Splendid progress so far.
Yes, I notice the delay.

The uniqueness of the asset names mean that if you have dark blue asset on Artboard 1 and it is named 'dblue', provided it is the exact asset that is replicated on Artboard 2 (and all artboards after), it should also have the name 'dblue' (i.e same name on all artboards, unique in that no other asset on the same artboard can have that name).
In your case its either both dark blue assets are named 'darkb1' or 'dblue' on both artboards and the respective image is named 'img1' or 'dblue-img' on both artboards too.

Try this and see if it works perfectly.
(From previous experience. this should most likely eliminate the delay).

Regards,
Wurah.

0

Komal
InVision ambassador Komal , ambassador
Comment actions Permalink

Hi Wurah,

I renamed all dark blue shapes to darkblue and images to img but the delay still persists. 

https://komal639304.invisionapp.com/prototype/ck9brmzad0063l5016arl61rd/play

 

I appreciate the help. Thank you. 

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Komal,

Since the assumed fix did not work, I tried recreating your animation and I found out the actual reason it 'flickers'.

The reason is because from artboard 1, the path you created for the light-blue in artboard 1 has a distinct feature from the same path in artboard 2 (the very rounded corner on the left hand side of the light blue).
The flickering occurs as it transitions from that pointed corner on artboard 1 to the rounded corner on artboard 2.
This is because the transition tries to mimic every change you make to an asset that has unique names on multiple artboards and the rounding of the edge just happens to be the last detail it adds.

Solution.
The surest way to create this animation seamlessly is to 'mask' while creating your asset.
Masks help hide either part or all of assets that you want visible on an artboard and hidden on another artboard especially while adding transitions. Simply put, masks can be any shape or path which makes assets visible as long as the asset is within the borders of the mask and invisible if it is out of the borders of the mask.

To add masks to your asset;

  • Since it's just the light-blue that you want to transition from inside of the dark blue to top right, it'll be the one with the mask. (Remember masks hides a part and reveals it when you need it). 
  • On artboard 1, the light-blue looks exactly like the dark-blue so all you need to do is just duplicate twice and rename one of it light-mask or any comfortable name and the other light-blue. (You will now have; dark blue, light blue and light-mask)
  • Colour the light-blue as you will and change the opacity of the light-mask to 0% (very important).
  • Make sure that the light-blue asset is above the light-mask (very important), select both (light blue and light-mask), right click and select 'mask' from the drop-down list.
    You should automatically have a group created. You can rename group (or not).
  • Drag only the light-blue asset till the part you want visible is what is left.
  • Copy and paste the group on artboard 2. Adjust till all parts of the light blue is visible.
    An issue might be that since you want the light blue to go beyond the dark blue, and the light-mask is the same dimensions as the dark blue (remember it will only be visible within the borders of the mask), it will start hiding again. Just adjust the dimensions of the light-mask on artboard 2 as necessary.
  • Create your transition as you would have.

This should work.

I also attached a downloadable link to the studio file of the test I did so you can check.

Regards,
Wurah.

0

Komal
InVision ambassador Komal , ambassador
Comment actions Permalink

Hi Wurah,

Thank you so much for the detailed solution and the file. I have now fixed the issue and learned a new technique. 

I appreciate the help you provided.

Best,

Komal

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hey Komal,

Glad it finally worked.
Thanks for sharing too.

Cheers,
Wurah.

0

join the conversation

to comment, sign up or sign in.