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


InVision ambassador ambassador
Mikita Shcherba Mikita Shcherba Edited

Advanced animation tutorials: user experience

Hello,

I was exploring the Invision studio and finally reached the Animations feature. So, i want to share with you my own user experience from this feature. Yes, I’m not afraid to look silly :) Everything is fine with basic animations, I found a good article concerning basic animation on the web site.

From the other hand, i'm struggling with advanced animation. I feel like there are a lot of cool things that i can do with it, but i don't have enough information for this. There are a lot of Invision studio Jams that shows great effects and so on, but they were recorded with a high speed, that means that they show only the final result. I also found this video regarding the Advance animation. The only video. I feel like im lacking some understanding with advanced animation but i do really like Invision studio!

Could you provide me with more information on how to use the advanced animation feature in more understanble way or there might be some step by step guides with different cases? I will highly appreciate any help with this question!

Regards,

Nick 

0

comments

sort by


Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador
Comment actions Permalink

Hi Nick! Thanks for this feedback - it's always helpful to hear what people are thinking.

The video you linked is a great resource. In addition, InVision has wonderful resource specifically for advanced animations, called the Getting Started Guide: Prototyping with Advanced Animations.

I hope that is useful for you as you continue exploring Studio, but if not let us know and we'll be glad to help!

Cheers,

Caitlin

0

Rob Whiting
InVision ambassador Rob Whiting , ambassador
Comment actions Permalink

Hi Nick ツ

In regard to;

      | more information on how to use the advanced animation feature in more understandably way or ... step by step guides with different cases

this free course - https://www.meaningfulmotionui.com/course - which makes use of InVision Studio as the animation tool might be useful.

Hope this helps ツ

0

Mikita Shcherba
InVision ambassador Mikita Shcherba , ambassador Edited
Comment actions Permalink

Hi Caitlin!

Thank you for the information. I have a practical question. I want to animate these 3 shoes artboards in a such way so they behave like this Gif. How can i practically do this, is it really possible?

Regards,

Nick




0

Mikita Shcherba
InVision ambassador Mikita Shcherba , ambassador Edited
Comment actions Permalink

Thank you, Robert!


I will also try this course, by the way, you can also have a look on my previous comment:)

Regards,
Nick

0

Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador
Comment actions Permalink

Hi Mikita!

Yes, the animation in the GIF you linked to is possible! 

Here's how I would approach it:

  • For the backgrounds, you'd have 2 layers for each screens. For the animation, play with opacity. That will give you the nice smooth transition.
  • For the shoe animation, place the shoes outside of the art board. When you animate, they will slide in and out from outside of the page. I'd use this approach with the small white line of text too.
  • For the dots at the very bottom, simply play with smoothness and timing during animations. I'd also pay attention to layers since the left dot always animates behind the other two.

The Getting Started Guide: Prototyping with Advanced Animations from my first comment is jam packed with support too, in case you get stuck using my steps.

Good luck! 

- Caitlin

 

0

Brandon Els
InVision ambassador Brandon Els , ambassador Edited
Comment actions Permalink

Hey guys, yeh really struggling to do basic animations, especially when just working on one artboard. Concidering how advanced some of the animation tools are, I feel like I'm missing something.

Realistically I'm just trying to animate content on a single page, without having to use more than one artboard - as they're only simple fade-in animations. And what would be the best trigger to animate content in as you scroll through a page.

Example 1:

At the top of the home page, I would like to have the "SELLING CREATIVE" and "BY THE KILO" text to animate in, with the "BY THE KILO" having a short delay before animating in. Can these animations be done on a single artboard, and if so, which trigger would I use? I've tested all of the triggers, but none seem to be working.

Example 2:

As you scroll down to the next section of the home page, I'd like for the next block of content to animate in - so this seems to more of something like an 'on-view' trigger - Is there an 'on-view' trigger option?

Really excited to get my head around these animations, as there is so much I want to play around with..

Also one other question - are GIFs / Videos able to be added as layers as well, and will they preview animated?

Thanks team!

B

 

0

Preston McCauley
InVision ambassador Preston McCauley , ambassador
Comment actions Permalink

Animations can be really tricky. I have found Studio one of the easiest tools to do pretty awesome looking animations. Here is what I suggest you do to get started.

  1.  Create one artboard
  2.  Create an object on the artboard (square, text)
  3.  Duplicate this artboard.
  4.  Change your object in some way size, color etc.
  5. Click on interaction and choose transition to motion

If you are like me this opened my mind to a whole bunch of possibilities. The main thing to remember is the layers, object that you use between the artboards need to have the same object name.

This video also does a good job of showing some concepts.

 

https://www.youtube.com/watch?v=TxdMkuyZURQ

0

Brandon Els
InVision ambassador Brandon Els , ambassador Edited
Comment actions Permalink

Preston, thanks mate. 

Yeh I sort of have my head around that, but the issues I'm having with it is that it's not really applicable to what I'm trying to achieve. Those animations seem to be more applicable to a scenario where I'd be clicking something, which isn't the case.

I really just want to have content animate in, as I scroll down the website, and things come into view. I can't seem to find a trigger that does exactly that. For example, having images fade in, and also parrallax as I scroll (example: https://www.youtube.com/watch?v=SmolT-tV5Lw at 20:03 - 20:15) - how would something like this be achieved, and is it achievable?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Brandon, 

Thank you very much for reaching out here in Community and working with on of our Community Ambassadors regarding this desired functionality. I noticed that you have also opened a ticket with our Support team on this matter. 

I have notified your Support agent of your comments here in Community so that they can better assist. Moving forward, they will be able to dig into this a bit deeper and provide you with more information. Please continue to work with our Support team on this matter.

Thanks again!

Shaina

0

Sherin
InVision ambassador Sherin , ambassador
Comment actions Permalink

How can we export our animations in gif format to showcase in Dribbble or Behance?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Sherin,

Are you looking for the ability to export your Studio documents as GIF files? If so, we are currently tracking interest for this functionality and I would be happy to add your vote. Please let me know if this is what you're looking for.

Look forward to hearing from you,

Shaina

0

Sherin
InVision ambassador Sherin , ambassador
Comment actions Permalink

Hi Shaina,

Yes I want to export my working prototype in a gif format. Similar to Adobe XD where you have this feature to record your prototype and export.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Sherin,

Thanks for confirming that's what you're looking for. I will open a ticket on your behalf to track your vote for this functionality. Please look for a message confirming your vote soon.

Have a great day,

Shaina

0

join the conversation

to comment, sign up or sign in.