Advanced animation tutorials: user experience

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

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 ツ

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

Thank you, Robert!

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

Regards,
Nick

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

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

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

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?

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

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

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

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.

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