JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript.

This is how I have attempted to write the code: (Starting with opacity 0 and scale 0)

(I am aware that my current method is not correct because it overrides the last set attribute)

    function hiA(){
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("opacity", "1");
    }

And the same but in reverse: (Starting with opacity 1 and scale 1)

    function byeA(){
        pathA.setAttribute("transform", "scale(.5)");
        pathA.setAttribute("transform", "scale(1)");
        pathA.setAttribute("transform", "scale(0)");
        pathA.setAttribute("opacity", "0");
    }

I am unsure if this approach is the best or if it would be better to add a class with the animation in CSS.

javascriptcssattributestransform

Answer №1

Customize classes and styles using CSS: https://www.w3schools.com/css/css3_animations.asp

Javascript:

 pathA.className+="hiA"

Cascading Style Sheets (CSS):

@keyframes example {
    0%   {transform:scale(1);}
    50%  {transform:scale(.5)}
    100% {transform:scale(1);opacity:1;}
}


.hiA{
    animation: example 1s;
}

View example: 

 function hiA(){
 var pathA=document.getElementById("pathA");
  pathA.className="hiA";
  setTimeout(function(){ pathA.className=""; }, 3000);
 }
@keyframes example {
   0%   {transform:scale(.5);}
   50%  {transform:scale(1);}
   100% {transform:scale(0);}
}
    
    
.hiA{
    animation: example 3s;
}
<button onclick="hiA()" id="pathA">animation me</button>

End of Description

Answer №2

To create smooth animations, you can use CSS keyframes:

@keyframes slideIn{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0);
  }
}

After defining the keyframes, apply the animation to a specific class or element using CSS or JavaScript:

.box{
  animation: slideIn 2s forwards;
}

Answer №3

After running a swift test on an SVG using your provided code, I can confirm that it functions properly.

However, my preference would be to define the animations within CSS and then simply add or remove CSS classes to and from the SVG or its nested elements. This approach allows for a cleaner separation of concerns in my view. Additionally, by outlining the animations in advance, you potentially enable performance optimizations by allowing the browser to utilize the GPU for smoother execution.

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

Integrating secondary functionality into fullPage and Vue.js

I am encountering an error in VueJS that says app.js:11754Uncaught TypeError: (intermediate value)(intermediate value).bind is not a function. I want to trigger the isLoaded function inside fullPage. I have tried using 'this' binding but it' ...

javascriptfunctionvue.js

Why is it displaying undefined even though there is data stored in Firebase?

I am experiencing an issue where the datatable row is displaying "undefined" instead of the data from my Firebase database. Even when I tried inserting random data into the HTML file for the datatable, it still shows undefined. Here is a link to My Datata ...

javascriptjquerynode.jsdatatabledatatables

Enhance your visual content by incorporating text onto images with CSS/Bootstrap5

I'm having trouble getting my rows and columns to display on top of my background image. I've been struggling with this issue for a while now. Any assistance on this matter would be greatly appreciated! I'm fairly new to this, so if it&apos ...

htmlcssbootstrap-5

Is there a way to rearrange my divs in the mobile display?

Is there a way to make the image column stack below the text info column in mobile view? I've tried using flexbox without success, so any help would be greatly appreciated. Thank you! <div class="container"> <div class="row"> ...

htmlcsstwitter-bootstrapflexbox

JavaScript form validation involves using client-side scripting to ensure that

I'm currently working on form validation, but I'm unsure if I'm overcomplicating things. I have a variable that compares elements and replaces an image with a checkmark for success or an X for failure upon successful validation. The function ...

javascriptformsvalidation

How to position the close (X) button on the corner of an image within a CSS grid

I have a collection of images with varying sizes and ratios in a responsive CSS grid layout. Each image needs to have a close button located at the top-right corner. To achieve this, I have inserted a form within each grid cell with a button and an image i ...

htmlcsstwitter-bootstrapbootstrap-4

Issue with the functionality of socket.io callback functions

Previously, I used to utilize the socket.io emit callback in the following manner: On the client side: mysocket.emit('helloworld', 'helloworld', function(param){ console.log(param); }); On the server side: var server = r ...

javascriptangularjsnode.jssocketscallback

Retrieving a variable from a JSON array with multiple dimensions using jQuery

Currently, I am working on fetching a multidimensional JSON array using JQUERY. I am facing challenges in extracting specific items from the array and inserting them into the HTML. I need assistance in navigating through the array to retrieve these elemen ...

javascriptjqueryjson

What is the best approach for addressing null values within my sorting function?

I created a React table with sortable headers for ascending and descending values. It works by converting string values to numbers for sorting. However, my numeric(x) function encounters an issue when it comes across a null value in my dataset. This is th ...

javascriptjsonreactjs

Using Struts2 to fetch data through AJAX and dynamically update a div element

Looking for advice on how to trigger an action class using JavaScript when a value is selected from a drop-down menu. The goal is to fetch data from a database and then update a table within a specific div without refreshing the entire page. The drop-down ...

javajavascriptajaxstruts2

What is the best way to create an oval-shaped background for a div element?

Can someone help me achieve an oval shape for my index page div? I tried using border-radius but the edges are too round for my liking. I am looking for a more specific result See the CSS code below for reference <div class="home-page"></div> ...

htmlcss

Load as soon as the browser is launched

I have developed a unique button that utilizes JavaScript to display the server status through an API. However, I am facing an issue where the server status does not automatically load when the browser is opened for the first time. You need to manually cli ...

javascriptjqueryfirefoxtoolbaradd-on

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...

cssreactjsbootstrap-4

Combining D3.js tooltip positioning with CSS overflow styling

I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem? CSS code: #chart1 { overflow-x: auto; overflow-y: hidden; max-width: 800px; max-height: 22 ...

cssd3.js

React- hiding div with hover effect not functioning as expected

I'm having trouble using the :hover feature in CSS to control the display of one div when hovering over another, it's not functioning as expected. I've successfully implemented this on other elements, but can't seem to get it right in t ...

javascripthtmlcssreactjs

Is it possible to obtain the index of a table row using querySelector?

Is it possible to find the rowIndex of the first occurrence of a table row within the #myTable using JavaScript? http://jsfiddle.net/bobbyrne01/fmj6np6m/1/ html .. <table id="otherTable"></table> <table id="myTable"></table> js ...

javascripthtml

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...

csslaravelsass

Why am I getting the "Cannot locate control by name" error in my Angular 9 application?

Currently, I am developing a "Tasks" application using Angular 9 and PHP. I encountered a Error: Cannot find control with name: <control name> issue while attempting to pre-fill the update form with existing data. Here is how the form is structured: ...

javascriptangulartypescript

Cypress is having trouble loading a particular URL

I'm encountering a timeout error while trying to load a specific URL using Cypress. Even after setting the page load time to 2 minutes, the issue persists. Interestingly, general URLs like https://www.google.co.nz/ load without any problems. it(' ...

javascripttestingautomated-testscypress

What are the steps for effectively utilizing the EmChart to achieve precise font sizes in ems?

Can you explain the intended use of this chart and instructions for how to utilize it? ...

cssxhtmlfontsfont-size