How to remove flicker in the animation

Animation
,
1

Dear friends, please help me. I hope that you have ideas how to remove flicker in the animation on the timeline.
I wanted to make a pseudo 3D animation for a long time.
The first thing I did was create a small animation in a graphics package and exported the PNG sequences. then I loaded as sprite sheets - but that was very slow and had difficulties. then I frame-by-frame replaced the background image at the group and I like the result. But there are flickers, I tried many ways to find a solution but no luck. I hope you can find the problem and help solve it.
I hope this method can be used by the entire community
hypetrouble
download file project: link

2

You should use a sprite sheet instead.

3

This was the first thing I tried, a sprite sheet. At 141-frame sequences and medium resolution becomes impossible to work in the project - very slow, and if the last slide (the end of the animation) go to the beginning (to the first frame) is thrown off the start of animation.

4

hmm,

I just did one seems ok. Trying to set up a link to it

5

Try this

https://markosx.com/hypeTests/downloadTemp/fake3dscene_mhv1.hype.zip

6

Of course, this is the first thing one wants to do, but this solution has an obvious problem - even 2 problems.
I am now uploading a video to YouTube to demonstrate the difficulties.

  1. it becomes very difficult to work inside the project - it constantly lags and slows down.

  2. in the browser google chrome when playing it also lags. i have tried it on win and on Mac. there are moments that frizz the picture.

This method works relatively well only in safari and only relatively.

I have an assumption that if you allow the animation ONLY on keyframes where there is a pause in the scene - maybe this problem will disappear. well, this is just a guess and my skills are not enough to properly fix the code js

In any case, thank you for trying to figure it out I appreciate it. But I'm still looking for a solution to this problem

7

I think honestly that's partly your machine,

I do not get this

In Chrome as I do get lag but not in Safari.

8

wow. realy not lag in hype....
Please tell me, how much slowness do you have in Chrome and what is the hardware of your Mac?

9

Very jumpy in Chrome. Suspect that could be dealt with with your scrolling code ?

M1 Mac Pro

10

You could also use video and a library like the following one… mitigating some of the downsides of reverse video playback.

11

btw the spritesheet thru imageoptim saves about 70% filesize

2 Likes
12

Thank you friends for your patience in helping me with this problem. Today I'm back on the project and I really want to make it work. I looked at the example of using ScrollyVideo.js and it seems like a good option to me.
Question - can you help to plug this library into my project normally. I can't get it to work correctly. If it works, it will be a great success! Thank you all very much for your interest in this question and trying to solve my problem

13

As this should usually work with a sticky property, you would have to manually do some positioning. At least a start. example.hype.zip (922,5 KB)

Here are more options:

2 Likes
14

MaxZieb, thank you! This solution looks interesting! and I imagined how I could implement what I want with this library. With your permission, I'll ask you to help me a little bit to figure it out. Really this element should be sticky. i tried to do it inside setup() with sticky value true.
I also tried position: sticky but that doesn't work.
I also tried adding in the head

<style>
	.fixed{
	position: fixed !
	}
</style>

and our element will be merged into a group and made fixed but without success.
Can you help me to configure this scene correctly so that the element stays throughout the scroll. Thanks

15

In the Head HTML... added important after your exclamation mark. Works for me with @MaxZieb's example:

2 Likes
17

could you upload sample file please

18

Hi Kellyn!

Here is the file:
example_Fixed.hype.zip (923.0 KB)

Also note that the css class in the Head matches that of the video - sorry for any confusion!

1 Like