When working on an animation in javascript, I encountered a problem that I can't seem to identify. I am attempting to make the pan function work with the "mover" function, but it seems like either I am not using the properties correctly within the "transformOrigin," or I have missed a step somewhere. Additionally, no errors are appearing on the console.
function changeImage(image) {
document.getElementById("pb").src=image;
}
function zoomIn() {
document.getElementById("pb").style.transform="scale(1.8)";
}
function zoomOut() {
document.getElementById("pb").style.transform="";
}
function move(element) {
document.getElementById("pb").style.transformOrigin=((event.pageX - element.offsetLeft) / element.width) * 100 + "% " + ((event.pageY - element.offsetTop) / element.height) * 100 + "%";
}body {
display: flex;
flex-flow: row nowrap;
}
#big {
width: 300px;
height: 250px;
overflow: hidden;
}
#pb{
width: 300px;
transition: transform 0.25s ease;
}
#thumbnail {
width: 60px;
overflow: hidden;
}
#thumbnail img{
width: 60px
}
#thumbnail img:hover {
opacity: 0.5;
transition: all 300ms ease;
}<div id="thumbnail">
<a href=""><img src="http://www.cosmoscreativeagency.com/images/1.jpg" onmouseover="changeImage('http://www.cosmoscreativeagency.com/images/1.jpg')" ></a>
<a href=""><img src="http://www.cosmoscreativeagency.com/images/2.jpg" onmouseover="changeImage('http://www.cosmoscreativeagency.com/images/2.jpg')" ></a>
<a href=""><img src="http://www.cosmoscreativeagency.com/images/3.jpg" onmouseover="changeImage('http://www.cosmoscreativeagency.com/images/3.jpg')" ></a>
<a href=""><img src="http://www.cosmoscreativeagency.com/images/4.jpg" onmouseover="changeImage('http://www.cosmoscreativeagency.com/images/4.jpg')" ></a>
</div>
<div id="big">
<img src="http://www.cosmoscreativeagency.com/images/1.jpg" id="pb" onmouseover="zoomIn()" onmouseout="zoomOut()" onmousemove="move(this)">
</div>