In my menu (Web - Video - Print), the hover effect triggers a gray background.
This gray background is a timeline. I created a timeline for each menu button (Hover web, Hover video, Hover print)
When I start the animation, the gray background is displayed by default (except for “Hover Video”), but it should be hidden and should only be displayed by hovering.
This is a function that I do not master in hype: how to prevent a timeline from starting at the launch of the animation?test-nav.hype.zip (77.8 KB)
Not sure what’s going on here… But! if you re-record the transformation on your elements, be sure to start recording when the element is fully collapsed it should just work. test-nav_test2.hype.zip (100.4 KB)
I’m not sure how you originally went about composing/creating animations, but one thing to think about is that alternate timelines are more of “streams of animations” than actual state. Thus if you make a new timeline and change the background before creating keyframes, you’ll be changing the initial state of the element. So the way to go about it is to create a keyframe first, and this will only affect the keyframe’s value and not the element.
Thanks Jonathan,
I use a lot After effect and the principle of creation of hype animations is inspired by it a lot, and I always proceed in the same way:
I create my form
I posit it at the point of arrival
I create my key images
I change my shape at the starting point
With Hype, it’s less natural I think, and I still have the same pb: an animation is visible on the entire timeline, even where the animation is cut off.
If I do not want to see an animation at the beginning, the only solution I know is to start the animation with an opacity of 0.
If you are only using one timeline it will behave like this, but the complication from After Effects model is that Hype manages different timelines triggered from interactivity. There are typically many more non-animated elements than animated elements on a scene, so we didn’t want users to constantly flip back to the main timeline to make adjustments, especially when those adjustments would be hard to make in the face of not seeing how they might be related to animated elements. For example, let’s say you’re moving an element and find it obscures part of another non-animated element – with Hype’s model you can move the non-animated one. The tradeoff is just that you have to make keyframes first, otherwise changes will always affect the initial state/value of the element. This model also works with the fact that it would be ambiguous on other timelines as to which state should be displayed on all other timelines and avoids you having to set across all of those if it is wrong.
duplicate the “video” timeline that works to create the web + print timeline
duplicate the rectangle “video” that works to create the rectangle web + print
-…
At one point, I created a new rectangle and without defining a particular option, it made all my other buttons work !!! There is, however, no connection between this rectangle and the other rectangles. I renewed the test but it did not work anymore.
Sorry but I think it’s a real Hype bug.
If it’s not a bug, is there a simple procedure (or tutorial) to explain this? because it is an essential point in the animation.
While waiting to find a solution, I change animation and it’s ok now.
As Hype remains one of the best solutions for html 5 animations, I will continue to work with, but I hope to see some small improvements, especially in the timeline:
timeout: playback stops a defined time and then restarts
“Go to a moment of the timeline”: to be able to start the reading at this point if one wishes it
Timeout, pause timeline (A) and start a new timeline (B) at that point you pause it, let (B) run then have that timeline continue timeline (A) pauze_timeline.hype.zip (17.4 KB)
I enclose an example. I created a “Test” timeline.
The animation of this timeline “Test” starts with an invisible image but in the main timeline, we see the end of the animation.
Normally, we do not have to see it since the first image of the timeline “Test” is invisible
When I run the animation in the browser, the timeline “Test” is not played so it’s the last image that appears.
How to make the timeline “Test” does not start automatically? Exactly as if I added a “stop” function at the beginning of the animation. Test-stop-timeline-on-load.hype.zip (12.7 KB)
Questions:
Is there a particular reason why You are using the second timeline "Test"? You could achieve what I describe below by just using the "Main Timeline" - if I understand your request correctly.
The Demo & explanation below assumes that a timeline is running when the project opens and that by moving the keyframe trigger for starting the "Test" timeline in the "Main Timeline" You can adjust when the animation occurs. But if this is not the case what do You envision triggering the animation other than time?
Main Timeline (Please see Fig. 1 below for reference)
1) Set a Timeline Action keyframe at "0" seconds (or whatever time) with "Start Timeline..." ~ Timeline "Test".
2) Create a "Display" property keyframe for the element with "Display" (in the "Element Inspector" panel) set to "Hidden" at time "0" seconds. The "Display" property (and many others) can be selected by clicking on the "Properties" bar.
Fig.1
Timeline "Test" (Please see Fig. 2 below for reference)
1) Create a "Display" property keyframe for the element with "Display" set to "Visible" at time "0" seconds.
It was not clear to me exactly what You were looking for until your last post - even then I wasn't 100% sure. Just part of the language barrier - we all try our best.
