So I ran the page in Chrome in an up and down cycle five times (“normal” scrolling speeds) - all looked good.
I also was checking the Mac’s “Activity Monitor”. The attachment below shows a typical readout… but a few times the “Google Chrome Helper (Renderer)” exceeded 120 MB of memory. The CPU % usage was in the upper '30s. iMac, High Sierra; 16 gigs of RAM & 1 gig for the graphics.
And now off to the slumber zone. 
I recorded a video where you can find the video strange behaviour I am talking about:
Have a good one.
Ok, I think I got it.
I made the target video to hide to get a zIndex of -1 and the active video a zIndex of 0 with a delay of 100ms before the video hidden property triggers.
So far seems to be working smoothly, more testing is required tho.
I added the hype file that includes these changes in the gasomatic7.zip
I was able to reproduce it as you showed in the video a couple of times. The document is quite complex so it is hard to specifically say the cause, but visually it does look like the browser is simply having a hard time completing all operations on the same frame draw. Your approach of working around via other means sounds reasonable to me. (Sorry this doesn’t help more!)
Thanks for your time on this. While it seems that I managed to improve the experience, on less capable hardware the experience really suffers from lags and other performance that are related only to the way I setup the videos.
I have noticed too that If I left the browser alone for some times (lets say 5 minutes), the videos just disappear without warning and there is no way to recover from that unless you refresh the site, so definitely there is room from improvement but I believe this is as far as I can go with my current coding knowledge.
My client saw this site: http://rappi.ouiwill.com/
And they asked me to create the motion graphics trying to get the same visual experience, but the one on the rappi site is unable to go backwards and I found easier to split the videos in segments.
I tried using backstretch since I have used it before for background videos, but the screen goes blank for a brief moment each time I swap videos.
I found Bigvideo.JS as an alternative, I even found somoeone here sharing a hype file with a functional bigvideo site, but I couldn’t figure it out how to change videos.
restricting to one forward- and one backwardvideo?!
so you’d only run into the issue when switching the direction …
This time you where faster. Same thought here. Switching would involve simple logic. Something along the lines of this:
FlippedTimeIndex=durationOfVideo - currentTimeIndex
To pause the video one could listen to videoProgress or use cues / tracks
I am going to try your idea, I by using the code I found here:
I will try to trigger the video change only when the video is ready to play. Im currently figuring it out how to effectively keep only 3 videos loaded (the one currently playing, the one that will play in the next scene and the one in reverse in case the user wants to go back).
Hi David!
I have looked at your video many times now (still no glitches as per your video capture example).
But I have spent the last several run throughs carefully examining how the elements move. To my eye all the elements look 2D-2.5D as presented.
Was there a reason why You went the video route... such as it already existed and You were expected to use it?
There have been several posts in the past on this Forum showing 2.5D effects - just using Hype's native capabilities - that would appear to "fill the bill" for the type of animation shown in your original post.
Here are two that I archived:
Hype file: Space-3d effect 2.hype.zip (23.1 KB)
A different effect:
The "original" is a cube rotation in a Scene. I adapted this original file above to a Scene transition - as the OP requested (v2 in the thread). The "Live Demo" below is now v4. They all run on a Swipe action.
Hype file: cube_transition_v4-swipe.hype.zip (203.9 KB)
In any event these are examples that might serve You well in future projects.
But why three Videos? One for Forward and one for Reverse are Not enough? You’ll sync Process when a Section ist completed …
Yeah, sorry, you are right, the site is going to load only 2 videos.
The one that actually plays during scroll stays as passive, that’s why I was considering that one, but since that video is already loaded I shouldn’t worry about that one.
Anyway, as far as I can tell, I think I finally managed to fix it:
(Reverse is temporally disabled until I complete cleaning up the messy code I have right now)
Is only disabled in this test site, the one in my main post have reverse scrolling enabled.
Having only two videos loaded, each one in 2 different divs:
one with z index -1
The other with -2
Dynamically I am alternating the current video to play on the top div while sending the inactive video to the bottom div, so when the video swap occurs, there is no blank space since the inactive video stills in the background.
Using $("#" + dinamycwrapperPLAYING).bind("ended", function() I only load the next video as soon the one currently playing stops, THAT is what seems that got rid of that strange glitching.
The whole code that fixed the glitching is this:
// PLAY VIDEO BLOCK ▼
hypeDocument.getElementById(dinamycwrapperPLAYING).play();
$("#" + dinamycwrapperPLAYING).bind("ended", function() {
hypeDocument.functions().scroll_ON(hypeDocument, element, event); //-------- ACTIVATE SCROLL
// PREPARE NEXT VIDEO
$("#" + dinamycwrapperNEXT).attr('src', '${resourcesFolderName}/' + dynamicNext);
$("#" + dinamycwrapperNEXT)[0].load();
});
// PLAY VIDEO BLOCK ▲It was a very specific request of this client, but I was always interested in mix motion graphics with web content, and Hype usually is really good for that, so I took this like a challenge to see how far I can push this kind of content.
And yeah, for the smartphone version there is no argument there, it will be a 2D experience, something like this thing I did in the past:
http://zanate.com.mx/public/im_html5_animator/
I think is the “wow” factor the client is going for, while there are more elegant solutions like the one that the Rappi site used (using only 1 video), I think that for now is beyond my coding abilities.
I added to the dropbox the file gasomatic18.zip
It contains what it seems the solution to the problem, I cleaned as much as I could. While I still believe some work can be done to improve this sine my coding solutions are usually not very elegant, at the same time, at its current state, it should save someone else from the nightmare I have been.
I actually really like the effect and with bandwidth getting bigger by the day and background video allowed on mobile this is certainly something I want todo too. Very inspiring!
The site my client used as reference actually plays the video in a smartphone:
I wont do that, first, because that is like black magic to me, and second, because I want to keep it as light as possible for the mobile experience.
Thanks for the kind words.
Was just thinking ( and may not be right for you ) but why can’t it all be done on one scene.
This uses a Math function on an element animation keyframe in a timeline ( in the video’s symbol ) to control where the video time is.
The math functions runs an aliased function in matchPosition() ( see this post of how this idea works )
The scroll() function deals with up down and controls the follow timeline as well as any other animation timeline. In this I have one.
This probably just re invents the wheel but just a thought…
Also the only reason the video is in a symbol is that’s how I started it out when I first had a quicklook at using multiple scenes with this approach.
But although I got it to work mostly!; it was cumbersome to do and in the end felt it made no sense having a lot of scenes just for info.
pa1.2.zip (2.5 MB)
( And as usual, just a quick thrown together example , the scroll detection in this example is limited on which device it will work with but should be easy to change to a more robust bit of code… )
Mostly because I remember having problems in the past trying to control videos from the timeline, specially trying to make them to play in reverse, and while I made specific videos in reverse that might be easy to trigger now from the timeline, it gives me some ease of mind having everything in their own scenes.
Using the build-in scene jumps in hype makes working super quick. And assigning the videos by using the scenes names is super easy.
Also, for making it responsive, I have find easier to split the content in scenes, working directly in the timeline, feels to me, it requires a more abstract mind set that I, sometimes, struggle with it. Still I remember working a lot like that back when I used Flash, I might give it a shot.
Also, that was the original idea since the content scrolling can be designed in a more precise way, but I didn’t have enough time to experiment, I was only given 5 days with the 3D content included, so took the safest route I know.
I wish Hype allowed to use custom easing curves for scene changes (is that Hype 5 I see in the horizon?).
Cool, was just a thought and funny enough may help me solve a responsive issue I have myself in where I need scale width but cannot use scale height as I need to be able to scroll some stuff in a particular layout.
And thanks for sharing it, you along h_classen, DBear and jonathan are my heroes here, it would be imposible for me alone without your tips and help to be able to do the things I am currently doing.
So thanks again to you guys.