This is the website I cloned:
https://circle-timeline.webflow.io
but this is what it looks like now that I’ve cloned it:
Can I get some help?
I’m trying to execute this idea:
Looks like a good use case for Rive.
You’d need to learn a bit about animation setup, but with Rive you have “states” and “transitions” that you can trigger externally with javascript.
That way, mousewheel or mouse movement could be used creatively to control your conveyor animation.
I am TOTALLY new to Webflow.
I’m hoping to use whatever this live site (https://circle-timeline.webflow.io) was using to get this idea to work. I just need to figure out how to align + rotate elements along the circle, and make these elements clickable so they scroll (along the circle) to take center-place when selected. I’m thinking I have a round conveyer belt image as the background, one that turns every time the circle turns as things are clicked, if that makes sense.
You might be able to adapt Timothy’s technique IF you can make your conveyor path a perfect circle. The dishes and the entire conveyor construction would always orient to the center of your circular path.
You’d need to learn some JS, this was implemented using a CSS transform to rotate the element construction. You’ll find that here in the page body.
You might be able to adapt Timothy’s technique IF you can make your conveyor path a perfect circle. The dishes and the entire conveyor construction would always orient to the center of your circular path.
Yes! That’s what I hope to do.
You’d need to learn some JS, this was implemented using a CSS transform to rotate the element construction. You’ll find that here in the page body.
ohh, I see
Thank you!
I’ve asked Chatgpt for help and got this code:
document.querySelectorAll(‘.circle_item’).forEach(item => {
item.addEventListener(‘click’, () => {
item.scrollIntoView({ behavior: ‘smooth’, block: ‘center’, inline: ‘center’ });
// Add highlighting effect
document.querySelectorAll(‘.circle_item’).forEach(el => el.classList.remove(‘active’));
item.classList.add(‘active’);
});
});
anddd
// Set variables
let circleParent = $(“.circle”);
let circleItem = $(“.circle_item”);
let itemLength = circleItem.length;
// 360 divided by number of items to calculate rotation per item
let rotateAmount = 360 / itemLength;
let previousIndex = 0;
let currentRotation = 0;
// Function to activate and center the clicked item
function makeItemActive(item) {
let itemIndex = item.index();
let difference = itemIndex - previousIndex;
let clockwiseRotation = (difference + itemLength) % itemLength;
let counterclockwiseRotation = (itemLength - difference) % itemLength;
let isClockwise = clockwiseRotation <= counterclockwiseRotation;
let amount = (isClockwise ? clockwiseRotation : -counterclockwiseRotation) * rotateAmount;
let total = currentRotation + amount;
// Rotate the parent container
circleItem.removeClass(“current”);
item.addClass(“current”);
circleParent.css(“transform”,rotate(${total * -1}deg));
// Center the selected item in the viewport
item[0].scrollIntoView({ behavior: ‘smooth’, block: ‘center’, inline: ‘center’ });
// Update rotation and index
previousIndex = itemIndex;
currentRotation = total;
}
// Initialize first item as active
makeItemActive(circleItem.first());
// Set each item’s rotation angle
circleItem.each(function (index) {
let thisItem = $(this);
let childLink = $(this).find(“.circle_link”);
let itemRotation = rotateAmount * index;
// Rotate each item to align along the circle’s curve
$(this).css(“transform”,rotate(${itemRotation}deg));
// On click, activate and center this item
childLink.on(“click”, function () {
makeItemActive(thisItem);
});
});
// Reveal the circle after rotations are set
circleParent.css(“opacity”, “1.0”);
// Scroll into view on item click with highlighting effect
document.querySelectorAll(‘.circle_item’).forEach(item => {
item.addEventListener(‘click’, () => {
// Remove the active class from all items, then add to clicked item
document.querySelectorAll(‘.circle_item’).forEach(el => el.classList.remove(‘active’));
item.classList.add(‘active’);
});
});
I’m gonna mess around with the coding to see what I can do.
