Help with jQuery mousedown scale function

Design help Custom code
2

@lorentracy - I think you could approach this two ways:

  1. Run the animations using jQuery after a mousedown event
  2. On mousedown add a class to your elements that initiates the transition

I personally like number 2 since it uses CSS animations versus jQuery animations.

To get to the css you could create a combo class in Webflow and apply the the scaling animations (so they are in your css file) or create some custom css and insert it into custom code in the site settings:

// this is just a super basic example
.slider {
    transition: all .2s ease-in-out;
}

.slider.mousedown {
   transform: scale(1.1);
}

Then in jQuery you would do something like this:

 // again a very basic example, but should work
<script>
$( '#slider-container')
  .mouseup(function() {
    $('.slider').removeClass('mousedown');
  })
  .mousedown(function() {
    $('.slider').addClass('mousedown');
  });
</script>
2 Likes