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

[handrawn]

I don't know if I see it as it should be in ver 19 but what I see is clever egg

[Egg Bramhill]

Thanks HD & Acorn, it was fun doing it.

Add in the ball rotating as it goes along.

I was trying to achieve the same effect Acorn as well as perhaps a little jump vertically but I haven't been able to achieve that yet.

[Acorn]

Egg, this might help:

anime({
targets: '.ball',
translateX: 1030,
keyframes: [
{translateY: 5},
{translateY: -2},
{translateY: 3},
{translateY: -3},
{translateY: 7},
{translateY: 2},
{translateY: -2},
{translateY: 6},
{translateY: -3},
{translateY: -4}
],
rotate: '5turn',
easing: 'linear',
duration: 20000,
direction: 'normal',
loop: true,
});


I also had fun making the ball instead as a rolling, rotating eyeball.
Something Gary might appreciate.

Acorn