Troubles with timelines - need help


(Patrick) #1

Hi

I need some help. I did a twitter visualization in hype. Its a school project.
After the first animation, when the twitter circles are built (finished) i want that the user can click on the innermost circle from each region as a button thats open a window as a Tweet-Scrollbar with all the tweets of the selected region.

likes this. If click twice it should closing.

The Problem is when already one window is open and you try to click on another regions innermost circle in the background. Its crashing and showing some confusing opacity of the regions. (Look at picture 2: Langstrasse shouldn’t have this opacity)

There are only two circles animated in document (Langstrasse and Altstetten).

Have anybody an solution for my problem?

Thanx a lot. Its an important school project for my exam.

project.hype.zip (270.0 KB)


(Jonathan Deutsch) #2

It would be useful to indicate which elements trigger actions/timelines - your document is very large and I wasn’t able to figure out the flow.

That said, for this type of document, there’s two basic techniques you can probably use. The first way would be that for clicking on any other elements, you could have it call a continue action that plays in reverse for all the other build-in timelines first. The second method would be to have a relative timeline that fades everything out, and start this first before your specific fade-in timeline.


(Patrick) #3

Thanks for your answer.

The elements which triggers actions are in the Maintimeline:

  • Langstrasse (Group) / LA_Punkt (Element)
  • Altstetten (Group) / AS_Punkt (Element)

They both continue a timeline by mouse click:

  • LA_Punkt > continue timeline «Langstrasse_Tweets»
  • AS_Punkt > continue timeline «Altstetten_Tweets»

At the end: every region should have his own trigger action like LA_Punkt (Element). By clicking on it, it should appear a Box with his Tweets and fade-out the non-selected region in opacity. Click again on Element (LA_Punkt) it should do it undone and go back to the initial status. Means the Box should disappear and make the fade-out in opacity of the non-selected regions undone. LA_Punkt works fine like i would do it for every region. The Problem is when you clicking on the other trigger action element AS_Punkt in the Background when LA_Punkt was already clicked once it shows confusing results. Means when you click on LA_Punkt (don’t close it with clicking again on it) than click on AS_Punkt. It will show some unwanted results off opacity fade-out. Same in the other way. First click on AS_Punkt than click on LA_Punkt in the background.

Another thing that is confusing me:
How you can see in my timeline «Langstrasse_Tweets» the groups Total_8, Total_9, Total_10… are changing her opacity correctly in the timeline. But in the browser preview when i click on LA_Punkt this elements/groups don’t change her opacity as in the timeline in hype. Why? Is it a bug?

See in the Screenshot:

Thanx for your answer and support.
Are you speaking German?

Thankful for any advice.

Best Regards,
Patrick


(Jonathan Deutsch) #4

I don’t speak German unfortunately - I have a deceptive last name :slight_smile:!

Thanks for the note, I have a better idea of what is happening now.

There’s a few Hype behaviors that I think understanding will help this document. First, you can think of timelines as streams of animations. A timeline is not a particular state - for example you could have a timeline animating up and down, and another timeline rotating the box. Both can be run simultaneously and will not interfere with each other.

So when looking at any given timeline you can’t make the assumption what you see in the editor is what will happen on the page as the current view will only show the effect of the animations from that timeline. The question becomes, then what is the rest of the state that isn’t animated? Hype will use the state from the playhead of the main timeline in the editor.

The other consequence from this is the question of what happens when two timelines have animations for the same property? In this case the last timeline set to run “wins” and owns animating this property. Otherwise things would bounce back and forth constantly between competing timelines.

So putting this together, I think the way to have your document work is to make the following two changes:

  1. Swap the order of the “Go to time in timeline” and “continue timeline” actions. This means that the timeline with the continue will “win” and you can run those animations free of interference from the main timeline.

  2. Add keyframes for opacity on the element that you want to display. Right now the “Langstrasse” group in the Langstrasse_Tweets timeline doesn’t animate in on that timeline. This means it will stay on whatever state it was from another timeline. So you should add opacity keyframes (even if they don’t change) to declare that the timeline should use that state. Same with the Altstetten group/timeline.

I’ve attached a variant of the project with these changes. I can’t say it is exactly what you want, but I assume the behavior is more of what you were going for.

project-fixed.hype.zip (326.8 KB)

I hope that helps!


(Patrick) #5

hi jonathan

thanks for your answer. i thought Deutsch is the language that you speak. :grin:
Can’t open your file. Says i haven’t the right.


(Jonathan Deutsch) #6

The right… what? I’m able to open it with the shipping v3.6.3.


(Patrick) #7

Hi Jonathan

Now it’s ok. It was right problem with mac account. Maybe the hype update v3.6.3 was the problem. A macbook restart solve it.

Thanks.

Patrick


(Patrick) #8

Hi jonathan

I’m now nearly finished my project and i would ask you for a last time for some advice. :blush:

I did some corrections like you said. It’s nearly work fine like i would. But there are sometimes some performance problems. I build some opener elements for triggering the actions (for example OpenerLangstrasse). First there is a mouseover effect. It will brings in details from region. Second Action is by mouse click. It opens the box with the tweets of the selected region. At the same time it should close any opened Region by playing every regions timeline reverse before opening the html-widget with the tweets. Its also fade out (opacity) off the non-selected region. This shows the user, which region is selected. Now there are some interferences.

  1. Sometimes when you click on a region. For example you click on the object «OpenerLangstrasse». Its like it jumping to the end of the triggered timeline. So you don’t see the whole animation fine (opening tweet-box, fade-out non-selected regions). The twitter-box suddenly appears. I think its often when you click on a Opener-Object for the first time. Maybe like there are some loading problems? Can this be solve?

  2. Sometimes the mouse over effect (timeline Langstrasse_mo) will overlap the triggered mouse click action (timeline Langstrasse). Means when you click on a region for example OpenerLangstrasse you will see the flag with the details slide back from the mouse over effect. If you go down of the Opener Object with the mouse (Like in the picture). But in the OpenerLangstrasse Actions the OpenerLangstrasse should first set the timeline for the mouse over «Langstrasse_mo» to the time 00:00.00. So they should overlap, right? But there must be some interferences with this both timelines because sometimes you nevertheless see the mouse over effect, when you click on the OpenerLangstrasse.

  1. The Maintimeline with his animations begins by loading the scene. But at beginning it doesn’t play fluently. Maybe its because they connecting to twitter. Or are they other reasons? Is it possible to start the animation not until the connection and loadings to twitter are done?

I appreciate some advices for this performance or interferences problems. I’m a beginner in hype and javascript and this is for a important school project. Thanks a lot.

Patrick

project_test.hype.zip (683.5 KB)


(Jonathan Deutsch) #9

I would suspect the performance problems are from loading the twitter widget. Doing some quick investigation using Chrome’s performance tools looks like this might be the case. I’d recommend trying to remove the twitter widget and see if that helps. Also, SVGs in general are not very performant in browsers, so if it is not twitter, you may also want to try changing images to bitmap types (jpg, gif) and see if that improves things.

As for the clicking on region, I see that your initial click using a “continue timeline” action. Depending on your goals, you may want this to be a “start timeline” action instead. Start will always restart the timeline from the beginning. I couldn’t quite see what you were describing and your document is pretty complex so it is hard to say for sure!

In general the mechanics of going to time and continuing are done in order, so it is probably just a good idea to write down the triggering order of events and to best reason about what might be happening if the behavior is not as expected.