Disable timeline playing in reverse

Hi,

I’ve been searching in the forum for a while now but haven’t found any answer to my problem.

I have a main Timeline, that is controlled by mouse scrolling.
(I’ve implemented the script from here: Continue Timeline when scrolling).
But I don’t want the timeline to be controlled from 0:00 to a certain time (for example 12:00) because that’s where the scene is loading and “building up” with a small video and animation.
Of course I have the same problem with the mobile layout: By dragging the scene the timeline should be controlled but not in this particular period of time.

So I need a code that disables/enables mouse scrolling or scene dragging or reverse playing at a certain point in the timeline.
Unfortunately I have zero experience in writing JS so I really need your help.

Thank you!

Hmm… the code I see prevents reversing beyond the 2 second mark:

if (event.detail < 0 && (hypeDocument.currentTimeInTimelineNamed('Main Timeline') > 2)) {

Perhaps you just need to change that value? You’re welcome to post your current example; there’s a lot going on in the post you linked to so I’m not sure which version you are using.

My recommendation would still probably be to have the Main Timeline do your initial setup, and then have another timeline for the scroll actions that could start from 0. In this case, you’d just need to change the references to “Main Timeline” to the new timeline name. (You can duplicate the main timeline in the Scene Inspector and then trim off the beginning bits if you already have a lot of animation).

Thank you very much for your answer.
It doesn’t work very well with the code. I changed the seconds at the end of the code line to the value I need (in one example it isn’t 2 seconds but 5).
unfortunately I can’t upload a file because it’s too big (although it’s a zip file)

Hmm, I’m not sure then what the problem is; you’re welcome to share with a dropbox or wetransfer link if you want another set of eyes on it.

Here’s a dropbox link to my hype document and a short list of the (new occurred) problems:

  1. The scroll effect doesn’t stop at 6.27 seconds although I’ve changed the number in java script. (Again, I’m a little stupid and don’t no a thing about java script, sorry)
  2. The shadow of the circular pictures are “dragged” across the scene when the timeline plays (forward and backward) although I’ve enabled and disabled the shadow at the beginning of the motion.
  3. On some browsers and systems the pictures are blurred, on some the pictures and the textbooks are blurred and on others everything is sharp. Has this problem to do with the “optimize at export” setting?

Thank you for your help!

Note that the Hype display is in frames and javascript is in fractions of a second. So if Hype's display is .27 that means 27/30 frames. In JavaScript this would be .9.

I'm not sure what you mean here as I see the shadow is disabled during the scroll too. It sounds like you might be hitting a browser rendering bug; can you send a screenshot?

You may be able to toggle browser rendering modes by unchecking Use WebKit graphics acceleration and/or checking Position with CSS left/top in the Document Inspector and see if that improves matters.

[quote="ajung, post:5, topic:17100"]
On some browsers and systems the pictures are blurred, on some the pictures and the textbooks are blurred and on others everything is sharp. [/quote]

Which browsers and which pictures?

When flexible layout is enabled, images aren't resized since we don't know the resulting size, so this likely isn't it. You can try toggling the setting and see if it helps but I don't think it will.

The scrolling is now working well, thanks :slight_smile:

Here’s a screenshot of this “dragging shadow”. I disabled webkit graphics acceleration and checked and dechecked the position with css left/top but I hasn’t got any effect. The thing is: as I zoom in to and out of the page again, the shadow seems to disappear…

The problem with the blur-effect appears on every picture on the document I sent you on dropbox. On my safari-browser it works but on the safari-browser of my colleague’s Mac it’s blurry. On my friend’s firefox browser everything’s clear and on the other firefox browser it is blurry. At first I thought it’s got to do with the speed of internet but on the same network the problem still occurs.

Yeah, this is unfortunately a rendering issue with the browser where it doesn’t correctly figure out what region needs to be repainted.

You may want to try using a box shadow in places where you can instead of drop shadows and see if that helps (though I’ve definitely seen this on box shadows and even plain borders too!). Probably the ultimate solution if you’re hitting this is to add the shadow as part of the image when feasible.

I will definitely try that.

To the problem with the “blurry images and texts”:
I’ve discovered, that when I load the page on my MacBook, the pictures and texts are sharp but when I drag the same loaded safari window to an external HD-Monitor, the texts and pictures become blurry automatically. When I drag the window back to my MacBooks display and play the timeline, the pictures and texts become clear again.
So the same system, the same browser, different (but high definition) displays and different results. How can this be?

Here are two examples of the problem described above (to prove that I’m not crazy)

Maybe this is related to image optimization. You can disable it on a image basis but then make sure that your images are actually optimized for web (2x) if your target is web.

When flexible layout is enabled, image optimization will not resize images at export since there's not enough information on knowing what an acceptable size will be.

In actuality, it is blurry on Retina too, just half as blurry since there are double the pixels :slight_smile:.

The fundamental problem is that your flexible layout group is using Zoom Contents. This means that a CSS transform:scale() operation is being applied to a group. This scaling kinda-sorta treats elements like if they were an image and scales from the size at which the element originally placed at. Thus pixels get bigger, and the bitmap style scaling uses interpolation so it looks blurry. Browsers do have a few smart tricks where they can render sharply even with the transform:scale() operation though, and Hype tries its best to make sure those tricks are employed. But there's two items in your document that are defeating these tricks:

  1. Usage of drop shadows. Using a drop-shadow puts elements in a different rendering mode where they will never render sharply. You will need to set the drop shadow Blur to 0px. This is also affecting your text; you'll notice it is much sharper if there's not a drop shadow. (Instead you can use a Text Shadow in the Text Inspector for text).

  2. The original element size. Browsers cache a largest render of an image to act as the size to draw from. Since you resized (height/width) the images to 64x64, it is scaling from this size even though the image itself is 738x744. You can actually "hack" around this by copying the image to the top-level of the scene (ie no flexible layout scaling), and then click "original size" to have it render at a large size. After doing this, you can just hide this larger version by setting its display value to hidden in the Element inspector. Now it will render from this larger size.

So with that, you can get sharp images. Of course, there might be performance implications with the #2 tip, and also I'm sure you want that drop shadow for #1. Instead another route would be to not use the Zoom Contents setting on the flexible group, and instead setup flexible layout settings on each of the elements. This is a bit more work though :slight_smile:.

I tried everything and the blurriness is now gone!
Thanks a lot :slight_smile:
However, there is another, more important issue I have to solve.

Maybe you could have your expert-eye on this too.
Thanks a lot!

1 Like