Looping a Rotation Interaction

Hello all,

I’m trying to loop a rotation interaction, but I can’t seem to get it to work. Here’s a link: gear.webflow.com

The idea is that the gear spins infinitely. It’s set up such that:

Initial Appearence: none (not empty step)
On Load: Rotate 10°, 500ms, Loop

As you can see, it only rotates 10° and this interaction does not loop.

Any thoughts? Thanks so much!!!

Can you post the public link here to your site? You can find it in your site settings.

Here you go:

https://webflow.com/design/gear?preview=14547e16858a6deee31d03981ceffb8a

Trying with your issue, I deducted : looping is like adding forever the same step. The first step tells your image to rotate 10°, it goes there. If the second step says the same, it doesn’t move, because it’s already there, at rotate 10°. You’d need incremental.

If you put one step rotate 60°, a second rotate 120°, a third rotate 180°, and play it, it will rotate 60, 120 then 180 and stop. If you loop that, it’s going to do 60 120 180, then back to the beginning backwards, then again.

For your rotation, I tried various things but couldn’t get it to work. I’m waiting for someone to give a better answer.

i was able to get it to work by adding a second step that essentially resets the rotation to 0 so it can loop. (see image)

The 1st step rotates it 359 degrees @ 3000ms linear. (no easing)
The second step rotates it back to 0 degrees @ 0ms (instantly)

5 Likes

Anyone know what I’m doing wrong?

The first rotation works fine but it doesn’t loop for some reason.

I’ve followed those steps, here’s a screenshot of my interaction panel

Any tips muchly appreciated, cheers forum!

Jamie

Maybe I woke up blind this morning… but I cannot find any gears on this website ???

Because of my blindness… I cannot provide a solution.

um…

am trying not to be over critical…

  • because I do think the site “looks nice”

but in reviewing your site…

  • I think you seriously need people to critique it.

Thanks for the reply, could you be clearer why you think it needs critiquing? If it’s in regards to the structure, then I know it’s pretty wacky, it’s my first time building anything on Webflow (never mind first time building anything online!) so I had to throw myself in head first. First try is always a tough one!

If the site looks good, responds well and works on all browsers then what’s the problem?

I’m not being aggressive I’m just very new to this stuff haha.

Thanks,
Jamie

I believe what @Revolution is trying to say is, to link to the site you’re working on.

Here’s how: Share a read-only link | Webflow University

Ahh OK, yeah I know how to do that, here it is https://preview.webflow.com/preview/normalvideoconcept1?preview=d195284d7217abbe71894631a8608fc8

The looping animation is on a page called tests, any thoughts on how to make it loop would be great! Ta,
Jamie

Jamie:

You site was not simple.

It did not follow the KISS rule.

As for it being your first (Webflow) site… that’s great.

  • the only way you learn / get better… is to jump in and make mistakes.

You would not believe how many mistakes I’ve made.

  • and this community has helped me out tremendously.

In general… People “are Simple”. They need and like things Simple.

Your design is Complex. not Simple.

Pierre

I’m not to be over-critical…

My finger hurts.

I cut it off by accident a few days ago in a cooking disaster.

It’s reattached and healing… but it frigg’n hurts

It’s very hard to type.

The first thing you see is a nice video…

  • and it’s really nice that it collapses into the Logo “Fish & Co”.

Personally, I would consider this site

  • to better suited as a Multi-Page website.

I’m sure quite a few people will disagree.

Two problems though… (as seen in this video)
http://quick.as/LZayTLDDw

  1. the video looks great - but after it collapse into the logo…
  • it’s an array of flashing and distracting colors.

It needs to transition in a static image - or a “slower video”

  • where the colors are not so overwhleming / distracting.
  1. the video never restarts. If you reload the site - you only see the “Fish & Co” logo…
  • which I already said was distracting.

You don’t see the video collapsing into the logo.

So on 2nd load of the site… all you see is this distracting array of colors.

You have a very nice white / simple intro page that becomes distracting.

After the intro… it would (IMO) be better if the logo “was Simple”… no movement - or slow movement
like this.

This is very distracting
http://quick.as/7w10FGggb


Your Our Work section is just TOO MUCH information crammed onto the screen.

http://quick.as/j2O3UqAAo

Perhaps consider doing what you did with the Overview section.
Segment “the work stuff” into tabs or into Modal windows… or consider a multi-page design.

This is nice. Very simple. Easy to use / easy to understand.
http://quick.as/xpwasZ00A


Our Services… is a BOOK… to much information crammed onto the screen.
http://quick.as/6Y5khQ33e

Again… your use of the Tabs in the Over section would work nicely here.


Your About Us section
starts off with a ton of images… then finally gets to the meat (David & Tanya)
and finishes with even more images.

What people want to see… are David & Tanya.

It would so so much better… if when you click on the About Us option…

and see a simple screen that tells us about David & Tanya. Simple. David and Tanya.

About Us… is about David and Tanya… and then Company… (which you didn’t mention).

So the whole thing is about David and Tanya.

Not about… Not I am Plastic. Not about BandID. Not about Fish & Co Hampton.

Make it Simple
http://quick.as/WAJ7igYY0

Your Contact Us option… doesn’t have a Contact Form

  • it doesn’t really need one… but why do you have to scream Contact Us ?

Can’t you just put the contact info into a Footer ?


1 Like

Haha no worries, honest feedback is always the best!

And wow, you’ve really gone out of your way to review it, thanks!! I absolutely get what you’re saying about the video header, it looks crappy when it loads and the gif is too fast, I’m going to have a work on that now. About the issue of the video looking bad whilst loading, that’s why I wondered if anyone knew how to loop rotate in interactions, so I could create a loading animation whilst the video loaded. I’ve added still fallback images for phone, and I might do the same for tablet, because it takes bloody ages to load the gif on tablet (I had a look at doing some scripted animations but gave up quickly haha).

With the rest of the site, you’ve definitely introduced me to a few fundamentals of UX! I’ll keep those in mind for my next projects. This site is for the studio I work in, and we all kind of pitched in on the design together (but I built in on Webflow). Because a lot of the work is non disclosure (can’t be shown for legal reasons) we had to kind of talk around it. And not put too much emphasis on the individual projects. Thats’s why it’s all quite busy, it’s supposed to be more of a mood board than a portfolio (if that makes sense haha).

Also David and Tan wanted more pics of the studio than of themselves, more about the team/group aspect than just them two!

Great help though and I’ll make the video changes now.

Thanks again,
Jamie

Hey @jamiesamman992, to address your initial question, you enabled a wait time for your rotation step.
To solve it, just disable that.

Here’s how I did it.
http://quick.as/j0xZFqAAX

1 Like

My man! Muchos gracias.

Time to implement this page loader.

Thanks,
Jamie

I’ve tried this and it loops but it’s not smooth, there’s always a glitch. Any way to fix it?

Rotating to 360 for 10 secs, then as a next step resetting it to 0 without delay + Loop solved it for me as well.

Thanks for the tip!

1 Like