Background repeat(x,y) animation

Say I have a background that repeats x and y, is there a way to create an animation that makes it slowly move to the right and repeat infinitely?

The image is blurred, so the size is bigger than the page the keep the image edges from being white.

Background Repeat.hype.zip (1.6 MB)

do you want the code or the animation with the program.?

Either way is fine really. When I tried to create the background with a blur using CSS, it made my whole document blurry.

i see… the pic inside element and has some px border thats why blurs whole background…

you mean like this ? https://davidwalsh.name/demo/background-animation-css.php

It works!! but i’m having a bit of trouble with the animation. It changed direction and speed with different page layouts. Got any ideas?

I used 100% 100% to make it go diagonally.

Background Repeat.hype.zip (1.5 MB)

Were you trying to do something like this?

Background Repeat-2.hype.zip (1.5 MB)

@PappaSmalls yes this is the right method, I did the same.

In Hype, you need to move an object and sync the displacement ( A to B in loop) with a shape with a perfect tile ( vertical and horizontal ).

this is a good software to make patterns easily.
http://neatberry.com/products/patterno/

@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 issue is when it loop you se the transaction movement. is there any way to fix that ?

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.

bgrepeat_fixed.hype.zip (249.3 KB)

2 Likes

I'm not quite clear what you mean here; and unfortunately the link is a 404... Can you elaborate and send a new link?

@jonathan The page is meant to be a 404 :slight_smile: he’s referring to the wave animation he made for that page :slight_smile: I think you need more coffee :slight_smile: 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.

You might want to see this...

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.

The end result is here...

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.)

@Photics Having the same issue as you here, using CSS transitions throttles everything and my mac jumps from 40C• to 75C• in a minute.

I’ve tried various other things and they all seem to just lag and overheat.

would this work?
Background Repeat.hype.zip (1.5 MB)

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
var xOffset=0,
	yOffset=0;
function bgMove(){
  	xOffset-=1;
  	yOffset-=1;
  	backgroundImage.style.backgroundPosition = xOffset+"px "+yOffset+"px";
   requestAnimFrame(bgMove);
 }
 bgMove();

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.

3 Likes

This is much better! Thanks for the code.

The document I provided was just an example. Luckily my image is much smaller, but I’ll definitely pre-blur it.

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.