Is it possible to move a div along a circular path with a fixed angle, such as moving the div only 45 degrees along the path and then back to the starting point, creating an effect similar to a pendulum?
I hope the attached picture clarifies what I am asking.
Thank you in advance for any assistance. Excited to hear from you!
According to your updated request (that the object should always remain vertical while rotating), I have made adjustments to my previous code.
There might be another method, but this is the only one I could come up with at the moment. Here, I have placed our original 'ball' element inside another div. Now, the outer div handles the standard pendulum animation. However, the inner object also undergoes a counter-rotating animation to maintain its vertical alignment throughout the movement.
It's important to note that the inner object has its transform-origin set as default, which is center center, allowing it to rotate around its own axis exclusively.
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: green;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
@keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}
#main-content
{
animation: innerswing 1s ease 0s infinite;
background-color: red;
display: block;
height: 100%;
width: 100%;
}
@keyframes innerswing{
0%{transform: rotate(22.5deg);}
50%{transform: rotate(-22.5deg);}
100%{transform: rotate(22.5deg);}
}<div id="container">
<div id="ball">
<div id="main-content"></div>
</div>
</div>If you want to create a pendulum effect using just CSS animations, you can achieve this by adjusting the transform origin to set the center point of the swing. By defining specific angles for rotation that are 45 degrees apart, you can simulate a swinging motion. Here is an example code snippet:
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: orange;
border-radius: 50%;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
@keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}<div id="container">
<div id="ball"></div>
</div>I'm having trouble centering the links in the dropdown menu. Here is the code snippet: <nav class="navbar navbar navbar-expand-lg fixed-top bg clean-navbar"> <div class="container logo" style="position: relative;"> <a clas ...
As I work on developing the project using Django, DRF is already installed. There is a process in the backend that generates a log file. My task is to search for specific target strings at the end of the file and display them on the HTML user page in real- ...
I'm encountering difficulties in implementing ContextAPI with a nextjs application. The error message I keep receiving is: TypeError: Cannot read properties of undefined (reading 'Provider') This is my approach to creating the context: impo ...
I am facing an issue with my Bootstrap buttons setup. Here is an example: <button :disabled="page === lastPage" type="button" class="btn btn-default" @click="getPage(lastPage)"> <span class="glyphicon glyphicon-forward"></span> </ ...
After attempting to use mx-auto to center an image within a Bootstrap 4 card just beneath the card-text, I found that the image remained left-justified. <img src="my.svg" class="mx-auto" alt="..."> I also tried placing the img inside a div and usin ...
Within my code, I have a div with the property of absolute positioning referred to as "abs". Right after this div, there is another div called "footer" which does not have any specified position value assigned to it. Even though I've experimented with ...
I have created a table that displays data, and within this table there are 2 tr elements with the classes default and toggle-row. When I click on a tr element with the class default, it should only toggle the corresponding tr element with the class toggle- ...
I am currently facing an issue when submitting a registration form. While the user is successfully created, the token is not stored in localStorage, which prevents me from being redirected immediately to the app and forces me to log in again. Here is my R ...
There is a gap between the text boxesIn the first row, I used text boxes with labels. When I use a text box with a label, the text box is attached to the text box in the first row. I tried using a break line but in mobile view, there is a gap showing be ...
Just a quick query – I've been diving into react js recently. Typically, when we create a component in React, we include the HTML template within the render function. I've noticed that most examples consist of small components with minimal HTM ...
While using MDDialog in my Angular app, I've encountered a couple of issues. Whenever a user clicks on the div, flickering occurs. Additionally, if the user then clicks on one of the buttons, the afterclose event is not triggered. Can anyone provide ...
Seeking to connect data from two different requests by nesting a .getJSON function within a .each function. Utilizing the Wistia video api to load videos with basic info and display the play_count in the "stats" JSON. Attempted code provided below is not ...
The documentation for VueJS states that the scoped attribute should restrict styles to a specific component. However, I noticed that if I create two components with the same baz style, it leaks from one component into the other: foo.vue <template> ...
After making a request to the server, I received the following response: { "statusCode": 200, "body": "{\"Errors\":\"\",\"Message\":\"\",\"Output\":\"\",\"TokenID\":\"F10645774 ...
There seems to be an issue with a div element where a table is being appended with input elements of type radio. The checked property does not change when clicked. What could be causing this problem? <input type="radio" id="radHalf0" name="grp0" class= ...
After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...
Here is an example of an HTML form: <form action="search.php" method="get"> <label>Name: <input type="text" name="keyname" /> </label> <input type="submit" value="Search" /> </form> When I try to search, it displays th ...
Just implemented this code snippet: jQuery(document).ready(function () { console.log('loaded'); show(); }); The code initiates a function when everything on my page loads, thus starting the project. However, I'm working with Three ...
Struggling with a webpage layout that features an image on the left and content area on the right, both with fixed widths. When reducing browser width, the image should not shrink but be cropped from the left side instead. Any solutions for this issue? ...
I am trying to use Ajax in the code snippet below to continuously retrieve a PHP query result until it reaches "6". The code seems to be functioning correctly, but once the result is "6", the script does not stop running. Instead, my CPU fan starts making ...