Yogesh Chauhan's Blog

How to add new elements with swing animation using JavaScript and CSS?

in CSS & JavaScript on February 14, 2021

In this post, I demonstrated how to create HTML elements using JavaScript. That’s what we are going to use to create elements.

We need to add texts inside the elements to make them visible. For that we can use innerHTML.

Let’s add HTML and CSS first.

I have opacity set 0 for p elements and opacity 1 for p elements with class .show.

I have added that variable i so that I can have a number to attach while creating the new p elements. For e.g. Item 3, Item 4, etc.

Let’s add create element functionality.

Now, to create swinging animation we need to add perspective to the parent div tag.

Just like this:


.div {
  perspective: 100px;
}

Also, we need to set transform property to -90deg for p tags and set it to none when the elements are shown using JavaScript. That will create a swing effect animation as soon as you add a new element.

Horizontal Swing animation

For Horizontal Swing animation, all we need to change is the transform property to rotateY(-90deg) from rotateX(-90deg).

Here is the live demo:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
SELF JOIN in PostgresPostgresCreate a galley with overlapping images using CSS gridCSSperspective property in CSSCSSWhat is an API?MiscellaneousWhat’s Interpolation in SCSS (Sass)?SCSSThe Sort and Compare Functions in JavaScriptJavaScriptAdvanced nesting in Sass (SCSS) using at-rootSCSSLIKE and ILIKE Operators in PostgresPostgresAngular: Templates, directives, data binding, Services and dependency injectionAngularWhat is Hoisting in JavaScript?JavaScriptDebugging in WordPress Part 1: WP_DEBUGWordPressForcing the domain to serve securely using HTTPSMiscellaneous