Rotating Barber Poles

[Acorn]

I wanted to create the illusion of a rotating barber pole.
The trick is to move the pole along a segment's width and repeat.

I used anime.js for this but it can all be done in CSS.

To work out the translation values, measure the displacement H & V of two adjacent repeats (red-white, red-white-blue-white).
I used 32px H, 32px V and (27.8, 16) (H,V), which is 32px at 30deg.
If you change the segment width or the angle, you have to recalculate.

anime - Barber Poles.xar

I assumed the USofA uses RWB for their poles.

Acorn

[Egg Bramhill]

Not quite a barbers pole:

[Egg Bramhill]

Another version:

[Acorn]

CROSS-POSTED
Two things Egg.

For barbers-pole.xar:
You needed to made the covers PNG.
The displacement needs to be 42.2px and not 31px; it jumps too much otherwise.

I might change the easing to 'steps(2)'.

Acorn

[Acorn]

Egg, for -2.xar, I like the left-most one.
I'd certainly move over for that one.

Acorn

[Egg Bramhill]

Cheers Acorn. I liked the jump in the first one so I left it in. Yes, the left police cars lights are the best.

Anyway, having fun with this. Here's a demo of an archimedes screw:

DEMO

[Acorn]

Cheers Acorn. I liked the jump in the first one so I left it in. Yes, the left police cars lights are the best.
Anyway, having fun with this. Here's a demo of an archimedes screw:
DEMO

Really good Egg. The static design is a winner on its own.

Add in the ball rotating as it goes along.

Acorn