I’m wondering if anyone knows how to scale a button or container on mousedown. I’m getting close. I can get opacity to work but I’m having trouble getting the scale to work on mousedown.
@lorentracy - I think you could approach this two ways:
Run the animations using jQuery after a mousedown event
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>
.shrink is the outmost container and .swiper-slide is the slide. I’m wondering if the fact the .swipers-slide isn’t a direct child of .shrink could be causing the error.
Also, I see you can’t publish read-only pages to see the code work. Is there another way to share my site with you?