Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation lacks the smoothness I am aiming for.

The issue I am facing is that the object seems to bounce back up slightly after being 'cut'. To counter this, I have attempted to minimize the rebound effect by adjusting the position of the entire object downward.

Therefore, I would like to inquire if there are alternative methods to achieve this animation or any suggestions on enhancing its fluidity?

Here is the code snippet:

<div id="box"></div>
<div id="bottom"></div>

And here is the CSS styling:

#box {
  width: 400px;
  height: 60px;
  background: black;
  margin: 100px;
  animation: ropecut 1.2s 1 ease-out;
  transform: rotateZ(0deg);
  transform-origin: top left;
  animation-timing-function: ease-in-out;
  transform: translateY(50px)
}

#bottom {
  width: 600px;
  height: 2px;
  background: red;
  margin-top: -50px;
}

@keyframes ropecut {
        0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
  70% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    100% {transform: rotateZ(0);transform-origin: top left;animation-timing-function: ease-in-out;transform: translateY(50px)}
}

For further reference, you can view the JS Fiddle here.

Answer №1

Here is a solution that involves removing the 70% section from the keyframe and eliminating the rotateZ in the 100% sequence. By doing this, you can ensure that the bottom left corner maintains its position.

#box {
  width: 400px;
  height: 60px;
  background: black;
  margin: 100px;
  animation: ropecut 1.2s 1 ease-out;
  transform: rotateZ(0);
  transform-origin: top left;
  animation-timing-function: ease-in-out;
  transform: translateY(50px)
}

#bottom {
  width: 600px;
  height: 2px;
  background: red;
  margin-top: -50px;
}

@keyframes ropecut {
        0% {transform: rotateZ(0deg);transform-origin: top right;animation-timing-function: ease-in-out;}
    50% {transform: rotateZ(-7.5deg);transform-origin: top right;animation-timing-function: ease-in-out;}
  100% {animation-timing-function: ease-in-out; transform-origin: top right;}
}
<div id="box"></div>
<div id="bottom"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript

I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...

The HTML button triggers a function to execute on a different webpage when clicked

I'm facing a straightforward issue that I can't seem to figure out due to my limited experience with Angular and web development. The problem revolves around two components, namely home and dashboard. In the home.component.html file, there's ...

Unable to eliminate blue highlighting in Chrome when an element is in focus

After clicking on the search button, there seems to be a persistent blue outline that CSS is not correctly removing despite the settings I've applied. Here is the CSS code I have used: input:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); outl ...

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

Creating a persistent gap BETWEEN li inline list items

I'm seeking a solution to create horizontal links using a list. I know that I need to apply the display: block property to the ul element and set display: inline for the li items. While there are several inquiries about maintaining a consistent width ...

Surprising CSS overflow error

Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...

Increased space between the sidebar and the top bar

Currently, my code is a bit messy as I am still in the learning stages of bootstrap. I need some assistance on how to resolve the empty space that exists between the top and side bar elements. <!DOCTYPE html> <html lang="en"> <sty ...

What could be causing the Bootstrap navbar to not toggle when the button is clicked?

Attempting to create a website featuring a collapsible navbar, but encountering some issues. The button is properly identified with the correct ID assigned. Jquery and bootstrap have been included in the necessary order at the bottom of the body. However, ...

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

Blurring and masking an image within a hollow circle shape

I'm currently working on developing a similar example using react-native-svg. The background image I am using is dynamic and needs a transparent circular mask. Additionally, I want to apply a blur effect to that specific section of the background ima ...

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

Modifying the color of a div based on a specified value using JavaScript

<div id="navigation"> Add your text here </div> <input type="text" id="newColor"><button onclick="modifyColor()">Update</button> <script> function modifyColor(){ var chosenColor = document.getElementB ...

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

Utilizing two distinct CSS frameworks within a single Rails application

At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

The HTML Style for implementing HighChart title text does not work when exporting files

I have inserted the <br/> and &nbsp; HTML tags into the HighChart titles. The style changes successfully appear in the chart view, but unfortunately, when exported as PNG or JPEG images, the text style fails to apply in the resulting images. To s ...

Display a page with sections that have opacity applied, identified by the hashtag #section, and utilize JavaScript to automatically scroll to the top of

Check out my app at . I'm working on overriding the scroll bar behavior in CSS to keep the entire app visible, including the logo, header, and controls, as users navigate through different sections. However, I seem to be having trouble with the CSS as ...

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Within the div, there is text with a 5px margin on the right. When the container div narrows, the text overflows from the container and loses the right margin. Is it feasible to maintain this margin on the right side while allowing the text to overflow fro ...

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

I am trying to highlight the menu item that is selected in a drop-down menu. I attempted the following code, which works if I prevent the default behavior of the link element, but I do not want to do that. So I tried using local storage instead, but it d ...

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...