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
comments
Sort by
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:
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.
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