Streaming live at 10am (PST)

Help with jQuery mousedown scale function

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.

I’m trying to achieve a slider like in this site.
https://uruoiskincare.com/products/u1

Scroll down to the “Find my Fit” section. I’d like to get my carousel to shrink a little when the user mouses down.

In my site I got my carousel working with Swiper.js. I also have a couple jQuery widgets in there that work based on a Finsweet tutorial.


Here is my site Read-Only: My Site

@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

Awesome, thanks for that.

If anyone else is interested I got it working with .cc only:

.hack-button:active {
    transform: scale(.8);
    transition: .2s transform;
}

*Edit - The CSS way doesn’t allow for setting a transition for the mouseup as far as I can tell so the jQuery method seems to give more control

Actually, I can’t seem to get the jQuery version working. Could you take a look at my new link?

CSS

.swiper-slide {
transition: all .2s ease-in-out;
}
.swiper-slide.mousedown {
transform: scale(0.5);
}

jQuery
Can't seem to paste the jQuery code in here but it is in my project.

.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?

Link

@lorentracy - I think you may want to target this element instead of shrink:

.swiper-slider-main-container

1 Like

I simplified my structure for testing and got it working here. Should be able to get it working on the other example now. Thanks for your help!