Rotate Circle while scrolling section

Design help Animations & Interactions
1

When scrolling over this div with Class name “Content”, I want to make that circle on the left rotate. How should I approach it?

Published at circle-menu

Read only
https://preview.webflow.com/preview/fernandocomet-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=fernandocomet-portfolio&preview=40c69e0f405d3d9d8d5089d58eaa3f91&pageId=62e15a769991419d177f5c6f&workflow=preview

Here is my public share link: LINK
(how to access public share link)

2

@Fernando_Comet here you go

const content = $('.content')
const circle = $('.circle')

content.scroll(() => {
    let rotation =  (content.scrollTop() / (content.prop('scrollHeight')-content.height()) ) * 360
    circle.css("transform", "rotateZ("+rotation+"deg)");
})

I assumed you want the circle to rotate the full 360 degrees. If you want only 180 degrees then change 360 to 180. If you want different rotation speed then … math :slight_smile:

Here’s a video with more details: Rotate Div While Scrolling in a Div - jQuery Simple Example - YouTube

1 Like