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.
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)
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…
but in reviewing your site…
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.
You would not believe how many mistakes I’ve made.
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…
Personally, I would consider this site
I’m sure quite a few people will disagree.
Two problems though… (as seen in this video)
http://quick.as/LZayTLDDw
It needs to transition in a static image - or a “slower video”
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.
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.
Your Contact Us option… doesn’t have a Contact Form
Can’t you just put the contact info into a Footer ?
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
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!
