I’m starting to use relative timelines and whilst I get the basic functionality I’m struggling a bit with the finer points. I’m creating a page of essentially faces that I want to fade in or out when you rollover them.
Now I have it working as I want but only when you don’t move between them too quickly, if you allow enough time for the animations to fully run they work as I want, IE they fade up and back relative to each other. The problem comes when I jump from one to the other too quickly, they get stuck as in the tinted image doesn’t fade back up and the coloured image stays showing.
I’ve tried all sorts of actions but am obviously missing something basic as far as the control goes, If I add a go to time in the timeline action after the play in reverse action then it works but I want it to play the fade back up rather than just immediately jump back to frame zero.
I just had a quick look. Firstly you should only have the mouse over/out actions on the groups. Not on the elements inside them. There is no point in that.
Also I think the issue you are seeing is more to do with the mouse over/out events. Which I am not sure there is a full solution to just yet. This problem is not restricted to Hype but is a browser event detection issue.
If the mouse moves over or out too fast the event does not get detected.
This does though seem to get compounded by the use of relative timelines which then stop any subsequent events from controlling the timelines.
That would make sense, it works slightly differently in FF, Safari and CHR. It seemed to work better when I reduce the fade times presumably because there is less crossover in the events.
Yes did wonder about the doubled up actions but was trying any option!
Guess I may have to rethink what I do then, the fades are a nice effect but may have to go for faster or instant and non relative.
Another thing that may help is if you create a timeout state -- a state where each of the individual elements are reset to their initial state to ensure that the document doesn't get stuck due to quick mouse over / out movements. This could be a timeline action at the end of each 'mouse over' state that fires after 30 seconds elapses which sets properties on each element.
Now I know what I'm looking for I can see it's just the way browsers work, they don't monitor every pixel movement for speed purposes just say every 5 or 10 and hence fast movement can get missed.
Have to say I may need a bit more guidance on the timeout thing, I found this:
But not sure how to implement it, is it a case of adding a custom behaviour as the action?
I think for this sort of effect it is best to turn of the relative in the timelines as they are the main conflict.
The mouse events work much better without them from what I can see.
In this example I have made each timeline only adjust one element. Then use mouse over and out to do the normal start forward and reverse.
I also then grouped all the main elements together and add some jQuery mouse events mouseenter & mouseleave to do a overall darken/lighten on that the main elements when the mouseenter & mouseleave events trigged on the group.
I created a down-and-dirty FAQ using timelines. It is much better to run a script that accesses a database, but this will work. An image-based project would work just as well as one that displays text.
Create one timeline that controls visibility of the categories, another than controls visibility of the questions and another that controls the visibility of the actions.
Align the contents to be visible at different points in the timeline – question one is visible at the 1 second mark and invisible at 1:29, question two at the 2 second mark and invisible at 2:29, etc. Click on a category to make the questions timeline visible and jump to the desired questions. Click on a question to make the answers timeline visible and to jump to the desired answer. Click on a question to make the answers timeline jump to the related answer.
It can be complicated, though, and a database solution is preferable.