Creating a div that Rotates on Mouse Drag

Design help General
1

Hey guys! I’m currently trying to create a div element that can be rotated upon mouse drag. (think a ferris wheel)

My non-working example: https://hunters-stupendous-project.webflow.io/

Working example: Drag rotation of a div - bl.ocks.org

This seems like a relatively simple integration, but I cannot figure out how to make it work. Please visit my link where you can see, I’ve added a .gif to a div container that I want to be able to drag and rotate. There is a bit of custom code in the body section of the page, however, I cannot get the page to work. Any help would be seriously appreciated!

Here is my site Read-Only: https://preview.webflow.com/preview/hunters-stupendous-project?utm_medium=preview_link&utm_source=dashboard&utm_content=hunters-stupendous-project&preview=d66f92a79f320cad4c245e3041c3e1d6&mode=preview

2

Bumping this question. Anyone who can help me out?

3

Hello @Hunter_Reynolds,

you are missing the <script src="rotate.js"></script> source code on your before /body section. Webflow doesn’t include certain javascript libraries you have to source it on the script. Maybe you can find it on the original link.

4

Pablo,

Eureka! Thanks for your response.

You were partially correct - if the javascript code was being fetched from a different location, you’d need to link it with the code above. Since they were hosting the code on their own servers, they simply called the script from the same root. In my case, as you had suggested, I found the link here: https://bl.ocks.org/joyrexus/raw/7207044/c71f8dc15e60f772bf9f05b3fac62a7003862ef5/rotate.js

However, after linking the script, I was still not able to get it to work. The solution? You need to add “type=‘text/javascript’” inside of the tag, otherwise your code will not work. After doing that, the rotation worked perfectly, and I decided to migrate the code to my own server instead.

Take a look at the site now, and thanks for the help!

1 Like
5

@Hunter_Reynolds,

I see, I shouldn’t have put the rotate.js, because that code was there on your example, I meant the code from the link that you found. The site is working great, I like how it always rotates and it can be dragged to rotate forward or backwards. I might use it on a project myself. Im glad I was able to help you.

6

Thanks for the help. And yes! The illusion of an endless rotation is actually just a looping gif! Please share if you end up finding use for a project of your own!

1 Like
7

I will @Hunter_Reynolds. Thank you for sharing!