Resources

using javascript in animation

First let's create a button

jQuery on('click')

Search "jquery on click" to grab the syntax for an .on('click' ) event

javascript code

inspect console, then click on the button

//animation_js_actions.js

$( document ).ready(function() {
    console.log( "ready!" );

  //used this syntax the most flexibility
  $(document).on('click', '#consoleClick', function(event){
    console.log('clicked: '+ $(this).text());
    console.log('element id: ' + event.target.id);
  });

});

trigger an animation



code

hover over the css3 logo to see a 2d transformation

/* animation_js_actions.js */
  $(document).on('click', '#triggerLeft', function(event){
    $('#car').removeClass();
    $('#car').addClass('translateLeft');
  });

  $(document).on('click', '#triggerRight', function(event){
    $('#car').removeClass();
    $('#car').addClass('translateRight');
  });
  //can you guess what this does?
  $(document).on('click', '#car', function(event){
    $('#car').removeClass();
  });

native js



code

hover over the css3 logo to see a 3d transformation

//animation_js_native.js

let plane = document.getElementById('plane');
let planeLeft = document.getElementById('planeLeft');
let planeRight = document.getElementById('planeRight');

planeLeft.addEventListener('click', function(event){
    console.log("clicked: " +event.target.id);
    plane.classList = '';
    plane.classList.add('translateLeft');
});

planeRight.addEventListener('click', function(event){
    console.log("clicked: " +event.target.id);
    plane.classList = '';
    plane.classList.add('translateRight');
});


plane.addEventListener('click', function(event){
    console.log("clicked: " +event.target.id);
    plane.classList = '';

});