Hover text compress effect

Hi there,

I came across this text animation that compresses txt left and right on hover. Does anyone know if it can be recreated in Readymag?

https://poodlefitzroy.com.au/

Thanks,

Jess

Hi Jess, I located the Jquery script on their website. I hope this helps!


<section class="custom_container">
		<div class="containerdownstairs">
		  <img src="poodle_home_down.png" class="down" style="width: 528px;">
		<img src="poodle_home_stair.png" class="stairs1" style="width: 1052px;">
		  </div>
		  <div class="containerupstairs">
		    <img src="poodle_home_up.png" class="up" style="width: 839px;">
		<img src="poodle_home_stair.png" class="stairs2" style="width: 741px;">
		  </div>
	</section>

$('.containerdownstairs').on("mousemove", function(event) {
  
  $("img.down").css("width", event.pageX)
  $("img.stairs1").css("width", $('.custom_container').width() - event.pageX)

})

$('.containerdownstairs').on("touchmove", function(event) {
  
  $("img.down").css("width", event.touches[0].pageX)
  $("img.stairs1").css("width", $('.custom_container').width() - event.touches[0].pageX)
  
})

$('.containerupstairs').on("mousemove", function(event) {
  
  $("img.up").css("width", event.pageX)
  $("img.stairs2").css("width", $('.custom_container').width() - event.pageX)

  
})

$('.containerupstairs').on("touchmove", function(event) {
  
  $("img.up").css("width", event.touches[0].pageX)
  $("img.stairs2").css("width", $('.custom_container').width() - event.touches[0].pageX)

  
})