Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Question

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Looking to incorporate two unique CSS animations into my project. Utilizing two buttons and one object, I want the first animation to trigger upon clicking the first button.

I understand how to handle one button and one animation, but am unsure how to manage two distinct animations on the same object.

Update: The issue has been identified!

javascript jquery css animation svg

Answer 1

Answer №1

Do you find this solution to be satisfactory?

let btn_a = document.getElementById('a')
let btn_b = document.getElementById('b')
let btn_c = document.getElementById('c')
let div = document.getElementById('obj')
btn_a.addEventListener('click', function() {
  div.className = 'anim-a'
})
btn_b.addEventListener('click', function() {
  div.className = 'anim-b'
})
btn_c.addEventListener('click', function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg) translate(200px)'})
  })
})

div {
  background-color: pink;
  width: 100px;
  transition: all linear 0.5s;
}

.anim-a {
  background-color: yellowgreen;
  width: 150px;
}

.anim-b {
  background-color: grey;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='obj'>animated</div>
<button id='a'>anim-a</button>
<button id='b'>anim-b</button>
<button id='c'>anim-c</button>

UPDATE

If you are using jQuery without CSS properties, the .animate() method can be utilized. However, keep in mind that .animate() does not directly support the transform property. This action can be handled within the callback like so:

btn_c.addEventListener('click',function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg)'})
  })
})

Answer 2

Do you find this solution to be satisfactory?

let btn_a = document.getElementById('a')
let btn_b = document.getElementById('b')
let btn_c = document.getElementById('c')
let div = document.getElementById('obj')
btn_a.addEventListener('click', function() {
  div.className = 'anim-a'
})
btn_b.addEventListener('click', function() {
  div.className = 'anim-b'
})
btn_c.addEventListener('click', function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg) translate(200px)'})
  })
})

div {
  background-color: pink;
  width: 100px;
  transition: all linear 0.5s;
}

.anim-a {
  background-color: yellowgreen;
  width: 150px;
}

.anim-b {
  background-color: grey;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='obj'>animated</div>
<button id='a'>anim-a</button>
<button id='b'>anim-b</button>
<button id='c'>anim-c</button>

UPDATE

If you are using jQuery without CSS properties, the .animate() method can be utilized. However, keep in mind that .animate() does not directly support the transform property. This action can be handled within the callback like so:

btn_c.addEventListener('click',function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg)'})
  })
})

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Answer №1

Similar questions

Error: Angular encountered an unexpected token in the syntax

Leveraging the @font-face feature along with fonts sourced from fontsquirrel

The issue arises when the mat-panel-description is not properly aligned with the shrinking panel

Change a PNG file into a three.js plane by converting it into height

Having trouble with jQuery events not triggering properly after dynamically inserting elements using an ajax request?

Custom Sizing for Bootstrap Modals

Arrange the divs in a horizontal line without stacking them vertically, specifically in Internet Explorer 7

Concealing other items in an array on selecting one item in React Native- A step-by-step guide

Flexbox presenting a specific alignment issue

Looking for guidance on where to find a functional code sample or comprehensive tutorial on working with ViewMetadata in Angular2

Tips for resizing the dimensions of two div elements to fit the screen dimensions

"Sliding through pictures with Bootstrap carousel placed beneath the

Adjust the carousel width on slide in Bootstrap 4

Tips for ensuring consistent alignment of the final navigation item

Here's a guide on how to package and send values in ReactJs bundles

Create a layout using jquery-tokeninput

Updating information on <element>

When utilizing GET in PHP to handle data created using jQuery's $.param(data) function, you will come across %5B and %5D symbols being used

Is it feasible to package shared modules into individual files using Browserify?

Combining two containers in CSS