This is very basic and most might find it un-nescessary,
As I was easily get a smooth transition effect on mouse over, it took me a little while to find out how to keep the smooth transition when the mouse was leaving the element.
– Recap for those who might need it (if not go to the next item),
- – Transformation and Transition on Mouse Over
Here as a example, how to get an image bigger when the mouse hovers it (of course could be applied to any block and could be any other transformation):
Select the Image block, go in the middle of the Design tab there is a little Mouse icon, hover it and choose the Hover mode.
Here you can apply all the changes you want to apply on Mouse Over.
We want it to get bigger in that situation, so just go to Design tab / Transformation and select Scale and add the amount you want in X and Y, let’s choose x:1.3 and y:1.3.
You can see the image in your image block get bigger, perfect.
Now let’s apply a transition. Go to Design / Effects and under Effect choose Transitions.
Click on the + Icon and you’ll see some new fields appearing.
In Duration you could add .4 and if you’d like a little effect choose Timing / Ease In.
If you get back to the Mouse Normal, by clicking in the middle of the Design tab the Mouse Icon and selecting Normal, you should see the effect applied to the image as you move your mouse over it.
As you leave, you will notice that the image gets back to its original size kind of abruptly.
- – Transition on Mouse leave
To fix this and get a transition while the image gets back to its original size is actually super simple.
Select your Image, go to the Design tab and keep the Mouse move as normal and add a transition here.
Go to Design / Effects and under Effect choose Transitions.
Click on the + Icon and you’ll see some new fields appearing.
In Duration you could add .2 and if you’d like a little effect choose Timing / Ease out.
It is that simple but for some reason I was missing out on this!