Jittery scene transitions! How to make them smoother?

1

I have a slideshow-like site with many scene transitions. The transitions are not smooth and this is a major issue since the site is based on those simple scene transitions!

This jittery playback of scene transitions are happening on all devices but on desktops these transitions become smoother once the user has gone through those transitions once and then plays it again for the second or third time.

On mobile phones and laptops with less power the problem really aggravates. Even though on the same devices slideshows made with some jquery plugins are smooth.

There are many jquery sliders that we have tried with these images and slides and we did not have this sort of a playback issue and playback was pretty smooth with the same images and image sizes.

But we decided to use hype for it because we needed some animations and animation control.

  1. Can someone please suggest ways to make these scene transitions smoother?

We are using the “Preload” option for all images already and that is making the site load slowly initially.

  1. If we do not use the preload option for the images will the transitions become more jittery or will it have no effect?

You can look at the site here: - and have patience while it loads :slight_smile:

http://52.206.39.77/distribution/

2

Preface Question: If You made smooth transitions with jQuery plug-ins, why can’t You use them with Hype?

What happens (on mobile) when You attempt to move these large images across the screen without the transition - i.e. just straight movement? Does it jitter also?

If so, You need to rethink using that type of transition (for mobile anyway) as the transition itself is not the problem, it is the physical issue of moving a large image across the screen of an underpowered device. Crossfades do a good job of hiding issues.

If the image does move across the screen smoothly (again no transition) on mobile, now we know the transition itself is the limiting factor. Consider starting & ending the transition (e.g. Scene 1 to Scene 2) entirely in Scene 1, then do an instant scene jump to Scene 2. > i.e. the last “frame” of Scene 1 (the end of the “psuedo-transition” between Scene 1 & 2) matches the first “frame” of Scene 2.

3

Thanks @JimScott
i cant use the slideshow based on jquery plugins within hype because I dont get control of the elements within the jquery slideshow from hype - because they wont be hype elements and we wont be able to get animation control over them

The problem is not on mobile devices alone. This problem occurs on my core i7 mac laptop too. The problem is more pronounced on iphone 5 than on iphone 6s. So power is an issue but the devices are not so underpowered as they appear to be when i run hype based slideshow. Jquery plugins seem to move the same images smoothly on the same devices.

So my question is : Is there any tweak in hype that can make the transitions smoother?

I agree that a crossfade would hide issues and it is a good camouflage but that is not the look and feel we are going after for this project. We need a sliding effect - albeit a smoother one.
The pseudo transition would also not work for us since the entire transition would happen with a blank screen (till scene 2 appears, one side of the transition would remain blank) - not something that suits us.

The second issue of mine is also equally serious - it takes several seconds to load initially - Is there any way in hype to load 3-4 images initially and then dynamically load the other images in the background while the user plays with the initial slides. We need the images to “preload” dynamically instead of “preloading” initially. If we do not preload then hype loads it during the scene load and that makes the transition look bad.

Would really appreciate if someone has solutions to these issues - we really want to use hype for our projects if these issues can be resolved somehow.

4

@sgibm

So my question is : Is there any tweak in hype that can make the transitions smoother?

Other than standard procedures for minimizing file size I'm not aware of any - if, as I think, your large images are the limiting factor here. Also, your animation has both the "current" scene & the "next" (or "previous") scene in motion. Does sliding just one image (i.e. "next" or "previous") over the current one (which stays static) improve things? The effect is very similar to having both images move with out sacrificing the overall sliding "look & feel" You are after.

Some general Hype considerations for animation issues:

  1. Try toggling 'use webkit acceleration'.
  2. Make sure 'position with css left/top' is unchecked.
  3. Search the Forum for "animation stutters", "jittery animation", etc. I have not found any clear cut generic solutions - but You might for your particular situation.


    Additionally, there are often incidentals that can affect things - such as technique. Along these lines I have added to the commentary in my post above...

I guess I did not explain things well. I'll give it another go, this time with a video to illustrate my description. The transition from "Scene 1" to "Scene 2" takes place entirely in "Scene 1" then instantly jumps to "Scene 2"- there is no gap or blank screen. If You do this correctly it is seamless, and You have complete control over all aspects of the transition, unlike with Hype's standard transition feature.

In the video below the texts "Scene 1" & "Scene 2" are both in "Scene 1". When You see the text "Now this really is Scene Two" fade-in, the instant jump to Scene 2 has just occurred. Ditto that for Scene 3's fade-in text ("Scene 3").

Project demo: PsuedoTransition_Demo_JHSv1.hype.zip (244.1 KB)

http://forums.tumult.com:/uploads/db2156/original/2X/4/42e7c7be42c25a81f0e0ca57823180d03e975deb.mp4


> The second issue of mine is also equally serious - it takes several seconds to load initially - Is there any way in hype to load 3-4 images initially and then dynamically load the other images in the background while the user plays with the initial slides.

In the example above I load the image for the Next Scene (off screen) in the Current Scene (there is no initial preload for any images but the first image in the First Scene):

"On Scene Load" (First Scene) we load the image that will also be used in the Second Scene:

hypeDocument.getElementById("imageHolderRect1").innerHTML="<img id='imageHolderRect1' src='${resourcesFolderName}/DSC_1566-sm-xx.jpg' alt=''/>";

The Second Scene loads the image for the Third Scene, and so on.

I've used (2) approaches to loading the images (just to show different possibilities):

  1. An offscreen Rect... used in the transition from Scene 1 to Scene 2
  2. An offscreen Persistent Symbol... used in the transition from Scene 2 to Scene 3.

This is just the general concept which, if applicable for your project, will no doubt require some adjustments to meet your needs.

2 Likes
5

@sgibm
Another thought: http://greensock.com/get-started-js

There is a vast repository of capability here - not used~needed GreenSock myself - but maybe something useful for You.

1 Like
6

I just found the above solution by @h_classen which shows how images can be loaded via code instead of using the "preload" option that slows the whole site down at the beginning. This code can be used after the site with a couple of images has loaded - so that the rest of the images can be loaded in the background while the user is busy looking at the site.

7
8

And so does your original jittery scene transition issue now work smoother on a tablet?

Do You have a new example to examine?