@jonathan in future an option to animate also the X/Y coordinates ( not covering CSS, only real size) would be a great improvement because you can animate complex scheme ( for example landscapes) without move an objects, also with parallax ( without code). A powerful but simple tool for cartoons and dynamic scenes.
for example, I used the method above to sync all waves but I spent a lot of time.
The problem was with the final position, it didn’t matched the first one. Also, I reduced the background file size since it is blurred it doesn’t need many details.
@jonathan The page is meant to be a 404 he’s referring to the wave animation he made for that page I think you need more coffee I think the gist is to match the object position at the start and end of the animation so that it looks seamless. I’m not sure about the mention of having x,y coords as animatable properties as I haven’t been following the discussion.
I had an awful time trying to create a scrolling background – especially since it had to work across multiple screen sizes. If you look at that thread, you can see the problems and solutions discussed.
It was extra tricky because the background uses an SVG image.
I basically scale the scene with JavaScript and I have a large element that's twice the size of the scene. The background image is shown once and repeated once. It scrolls edge-to-edge and then repeats. I stretch the background vertically to get rid of horizontal line. (For some reason, a seam would show up. I tried to get rid of it, but then just stretched the background vertically.)
I would strongly not recommend using css effects on such a massive image, i would do the blur in photoshop and export the image out already blurred. Pretty sure the lag is both because of the effects and the fact the image is so big.
I fixed the overheating problem by manually scaling the scene. This dramatically reduced the strain on the CPU. It’s not constant animation, so it works.
Regular Hype animations seem to work for me. With B.R.O.O.M., I have a full screen SVG moving across the screen. The CPU seems OK. I think the problem is when I use the “Scale behavior”, which severely hinders performance. I told Tumult about this issue, so hopefully it will be fixed in a future version.