Transform scaleX and maintain fixed right position

Question

Using jquery to scale some text with mousemove but can't figure out how to make the word on the right (h2) scale out to the left from the right side of the word from the fixed right position. Instead it always scales from the left edge of the word.

I want the 2 words combined to fill the width of the window at all times and as the cursor moves left, the left word (h1) shrinks and the right word (h2) grows and vice versa.

There is also a problem that I am using some script to scale each word to 50% of the window width on document.ready, but again the right word (h2) scales from its original position based on the css font size and so scales off the page.

Using text-align: right has no effect. How can I keep the right word contained in the window and scale out to the left? jsFiddle

var originwidth = $('h1').width()
var originheight = $('h1').height()
var origh1scalex = $(window).width()/2 / $('h1').width()
var origh2scalex = $(window).width()/2 / $('h2').width()

$(function() {    
  $('h1').css('transform', 'scaleX(' + origh1scalex + ')'); 
  $('h2').css('transform', 'scaleX(' + origh1scalex + ')');
});

$(document).on('mousemove', function(event) {
  var scaleX = event.pageX / originwidth
  var scaleY = event.pageY / originheight

  $('h1').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})

var originwidth = $('h2').width()
var originheight = $('h2').height()

$(document).on('mousemove', function(event) {
  var scaleX = ($(window).width() - event.pageX) / originwidth
  var scaleY = event.pageY / originheight

  $('h2').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})

h1,
h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

hgroup {
  display: block;
}

body {
  line-height: 1;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: Arial;
  font-size: 32px;
  line-height: 1.5;
  background-color: #ffdc00;
  color: #333333;
}

h1 {
  font-size: 5vw;
  font-weight: 700;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

h2 {
  font-size: 5vw;
  font-weight: 700;
  position: fixed;
  top: 0;
  right: 0;
  transform-origin: 0 0;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>LSNR.B</h1>
<h2>DESIGN</h2>

Answer 1

I've made several improvements and here is the result: https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010

The issue was a missing transform-origin: top right; on the CSS of H2. This sets the origin point where all translations, scale and rotations will be made.

Also originwidth was needed to be calculated inside the mousemove event because it changes every time the transform is calculated.

A few other improvements made are:

• Only one mousemove event is now used.
• String template literals like scale(${ scaleX }, ${ scaleY }) are used so that it is easier to discern how the string is built.

This further version allows setting a size when the page is loaded first time and no mousemove event has happened yet: https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111