Transform ScaleX And Maintain Fixed Right Position

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 righ

Solution 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