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


InVision ambassador ambassador
Ziran Xie Ziran Xie

Animation: get control with "blend in" or "move in"

Hi everyone,
I´m learning the studio and can´t make an animation I want. I will be thankful for any help.
What I want:
Click the first image on artboard 5 will go to artboard 6, the image grows, the yellow buttons move in and the background gets darker smoothly. This part works well.
Then I get the problem: if I´m on artboard 6 and click on the small image, I would like both images just swap their position and blend in, and this can´t happen. I tried to rename the layer but it also affects the animation on other artboards.
Is there any way I can do this?


Please see the attached screen.

0

comments

sort by


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

Hi Ziran,

Sorry for the inconvenience you are having getting the animation that you want.

I tried this animation from my end and I think your approach is certainly correct but a suspect that makes it not animate would most likely be the 'naming of the images'.

There are basically two images there and for the animation to work effectively, the images must have the same unique names across all artboard (Image 1 should be image 1 across all artboard and take care not to have another element on the artboard or another artboard named image 1. Similarly, image 2 should be image 2).

This would allow the 'auto-linking' of the elements for smooth transition.

If you have the same name across all artboards and no other element bears the same name, there might be a slight chance that the elements are not 'auto-linking'. In this case when you are in the edit timeline screen, just click the 'link layer' icon (shown in picture attached).

I hope this works.

Feel free to ask further questions if it doesn't work.

Regards,
Wurah.

1

Ziran Xie
InVision ambassador Ziran Xie , ambassador
Comment actions Permalink

Hi,

 

Thank you very much.

You are right. The "auto-linking" was the reason and I get the effect as I expect.

 

There is only one thing I would like to change now. I realized the yellow buttons from artboard 6 to 7 disappears and blend in again, even though the opacity is always 100%.

How can I change that?

 

Regards,

Ziran

0

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

Hey Ziran,

Glad that worked fine.

For the yellow buttons still disappearing and blending in again, there could be a couple of reasons.
I suspect that you duplicated artboard 6 and edited the contents. If that is the case, there is a high prospect that the yellow buttons in artboar 7 inherited the behaviour of from artboard 6.

I suggest you delete the yellow buttons on artboard 7 and just copy and paste the yellow buttons from artboard 6 onto artboard 7 and try the animation again.

I hope this works.

Regards,
Wurah.

1

Ziran Xie
InVision ambassador Ziran Xie , ambassador
Comment actions Permalink

Hi Wurah,

 

Exactly! Thank you. I´m happy with the result.

 

Regards,

Ziran

0

join the conversation

to comment, sign up or sign in.