Problem: Help setting up animated wheels with buttons
Saola Animate version: 3.1.3
OS: Windows 11 64bit
INotes: Hi all, I’m completely new to CSS/HTML animation. Is it possible to design something like in the attached screenshot with Saola Animate?
I want the wheel to spin right/left according to arrow buttons, and when the triangle in the red circle points to the title in the yellow circle, a text box specific to the title would be displayed with text.
In the example attached, I’m simply using a single timeline called ‘dialTL’ that creates a rotation animation and pauses at the points marked by Lights, Camera, Sensor. I then added the text boxes to fade in / out in between the rotation points.
Lastly, I set the control arrows to play the ‘dialTL’ either backwards or forwards.
Insert an ellipse or circle shape to represent the wheel.
Apply an animation to the wheel, such as a rotation or spin effect. You can do this by selecting the wheel and clicking on the “Animate” tab in the Properties pane.
Add buttons around the wheel using rectangle shapes or other shapes of your choice.
Apply interactivity to the buttons by selecting each button and clicking on the “Interactivity” tab in the Properties pane. Choose “On Click” as the trigger, and select “Go To Scene” as the action.
Create a new scene for each section of the wheel that you want to link to a button.
In each new scene, add content related to that section of the wheel.
Go back to the main scene and select each button again. In the Properties pane, choose the appropriate scene from the drop-down menu under “Go To Scene” for each button.
