How to prevent a timeline from starting at the launch of the animation?


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? (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. (100.4 KB)

Thanks ! It’s work…
But I do not understand your explanation :frowning:

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.

I did some more tests:

  • start by creating keyframes or vice versa
  • 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.

Thanks !!

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

Thanks !!!

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) (17.4 KB)

Goto a moment in a timeline, you mean like this?

Thanks Rick !!!

These examples are very useful, I will try to use them in my next animation.

But I do not have a simple answer to this post: how to hide a timeline when starting the animation. I tested :

  • opacity: 0 of the first keyframe
  • shift of the first keyframe on the right
  • timeline action “Suspend Timeline”

What are you trying to do here? (hide a timeline when starting the animation). You mean inside Hype? Where is this timeline visible? :face_with_raised_eyebrow:

Hello Rick,

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. (12.7 KB)

Tag I’m it! :upside_down_face:

Hi Pierre,

Hype Demo Project: (11.8 KB)

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.



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.



1 Like

Thank you very much for this tutorial very clear !!!, it’s perfect!

I did not know “Display” property, it’s the function I was looking for and I did not think it existed in Hype.

Your advice will allow me to go further with Hype.

And I’m sure Jonathan knew this function;)

1 Like

Hi Pierre!

Glad You found your solution.

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. :rainbow:

1 Like

Yes, I understand, my english is approximate, sorry, but thank you very much for your very good support !:fusée: