I’m a newbie that knows just enough to get himself in trouble. Busy building a website for my wife. Instead of a slider, I built a video with text, but as the text did not render nicely, I imported the video into Tumult and used tumult to render the text “live” on the website. The document html5 export is linked up in DropBox.
The issue that I have is that 4/5 times on Chrome, the video lags/jitters at 24 through 26 seconds as the video fades out and I fade in a PNG vector. The video and transitions play fine on FireFox.
My system is a MacBook pro mid 2015 and I’m testing on chrome V 77 and FireFox 69.0.3.
Any recommendations on what I could do better/more optimal would be very much appreciated - I’m not sure whether the PNG res is too high to use fades or whether I’ve missed something obviouse on Tumult that I should be using/implementing.
I think the choppiness if from the blurred transparent image over the video. This is going to require a lot of extra processing power to render. One thing you can do is have two images: one blurred image and one sharp image. You can then fade out the blurred version and fade in the sharp image at the same time. Adjusting the opacity of an object is going to require fewer GPU cycles and will likely be much smoother.
Or, you can render this Hype animation as a video . (File > Export as Movie) – the rendering will be done frame by frame. You can then embed that video on the site to avoid any live rendering glitchies.
Hello Daniel,
Thanks a lot, I finally had time to circle back to this project. your root cause is correct, it was the blur. I just removed it and adjusted the opacity, the end result is 9/10 there, it loads snappish, which is great. thank you for the pointer!
Rudolf
Busy building a website for my wife. Instead of a slider, I built a video with text, but as the text did not render nicely, I imported the video into Tumult and used tumult to render the text “live” on the website. The document html5 export is linked up in DropBox.