Please see the attached sample Hype document for your reference.
I am trying to apply actions on mobile image which at the bottom of the screen (20% visible), On Mouse Over it pops up & On Mouse Out it goes back to original position. This is fine but when I put action On Mouse Click it should slide in to the middle of the screen. It works but the moment I move the mouse out it go back to the previous position. How do stop the animation post Mouse Click.
Please help me to to solve the above issue.
Thanks in advance.
The simplest fix is to adjust the timeline keyframes. Instead of a “Pause Timeline” at 4 seconds I switched it to “Go to Time in Timeline…” @ 5 seconds (where the phone is still in full view), and there now is a timeline “pause”. When You “Mouse Out”, which You set to play the timeline backwards, it then hits the 4 second mark where the “Go To Time” timeline action sends it back to 5 seconds.
Your solution is working, but when I immediately Mouse Out after Mouse Click, it goes back to the original position. Is this the limitation of Hype or I am missing something logically?
The phone does pop-up to full view when You mouse over it again - I don’t think this detracts from the presentation; and how many people are going to be that quick on the exit (less than a second)? But that is not your vision…
A quick “mouse out” event will always fire after the mouse click and override forward progress on the timeline. One option would be to rethink your use of the “mouse out” event (or is it even needed?).
I can not come up with a simple timeline-only solution here. I think JavaScript in conjunction with a timeline(s) would be the way to go. But I think if You were familiar with JavaScript You probably would have gone that route by now.
If that is the case, perhaps some one else can offer another suggestion using just timelines.
There is small issue which I am not able understand how to solve it. In this same example I have embedded Fontawesome, but it is showing me in Italic by default and I am not able to control from the Font properties.
When I checked in inspect below CSS is giving trouble.
.HYPE_scene i, .HYPE_scene cite, .HYPE_scene em, .HYPE_scene var, .HYPE_scene address {
font-style: italic;
}
Could you please help me resolve this issue.
Currently I do not have the time to look into your situation with the CSS fonts - it might be a few days before I do. This is a topic I do not know very much about and I would need to do some research & experimentation - which could take a while - to give You a good answer.
However, some suggestions to help get You the quickest answer in the immediate future...
Your question is off-topic in this thread - post your last question about the fonts as its own topic and You will be more likely to get an answer from others.
Posting an example Hype file that clearly demonstrates your issue is always a good idea.
Do a search on this Forum for "Custom Fonts", "CSS Fonts" or even just "Fonts" for the most complete listing. People have asked this kind of question before, so You might find your answer.
Below are (2) example links to posts that might offer a solution - or at least point You in the right direction. By Thursday I will probably have the time to look into your question if your issue is not resolved by then.
