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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
The simple difference between var, let and const in JavascriptJavaScriptWindow setInterval() Method in JavaScriptJavaScriptSorting Arrays in JavaScriptJavaScriptHow to center an image horizontally and vertically?CSSThe unique operator($) in Envision BasicEnvision BasicHow to create a Recent Posts function in WordPress?WordPressHow to add before after image effect using pure CSS?CSSuser_can vs current_user_can in WordPressWordPressHow to reprocess failed items in Etrieve Flow?MiscellaneousKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscellaneousClasses in JavaScript: The BasicsJavaScript