Animated Clipping Mask in Canvas

Question

I am trying to achieve an animation wherein you have three layers of images - a background, a foreground and a third layer (a circle) which acts as a mask.

The background and the foreground images are static, with the foreground positioned over the background. The bg is always visible, but the fg is initially hidden. The circle moves around randomly within the background image, and within the circle, you can see the foreground image (kind of clipped)

Link to pen - https://codepen.io/the_anshulkumar/full/MWeqNJM

Please note that the desired effect starts only about 10 seconds when the fg image gets fixed on to one position. In the first 10 seconds, the foreground image moves along with the circle, which is not desired.

Although I have tried to achieve it with CSS and JavaScript, it isn't perfect. For starters, it takes a while for the circle and the foreground image to get into their positions. Secondly, I am animating the top and left properties which make the page very slow.

$('.circles').animate({ top: newq[0], left: newq[1] }, speed, function(){
    animateDiv();        
});
$('.fg').animate({ top: ("-"+newq[0]), left: ("-"+newq[1]) }, speed, function(){
    animateDiv();
});

Can the starting 10 seconds of the foreground moving around be fixed? and can this be done by CSS transforms instead of animating the top and left properties? Third option is if this can be done by Canvas. I know canvas would be the better option to go as the animation could easily run at 60fps but I have literally zero knowldege in HTML5 canvas.

Any help would be really appreciated. Thanks a lot

Answer 1

Below is the Pure CSS method to achieve the same

I made something similar to yours in the above link and corrected the flaws as mentioned in the question.

I created a div for foreground image and set the overflow as hidden so that the image won't cross the defined dimensions of the lens and applied separate animation for the movement of the lens and the foreground image.

Previously I used box shadow with a very large spread value which will give a hole effect and then created animation to it which proved to be futile when we need a background image.

See it in fullscreen

 * { margin: 0px; padding: 0px; } .background { position: absolute; height: 100%; width: 100%; background-color: black; } .background img { margin-left: 300px; } p { color: white; font-size: 100px; } .lense { position: absolute; height: 350px; width: 350px; box-shadow: 0px 0px 0px 10000px transparent; border-radius: 50%; transform: translate(200px, 0px); animation: move_lense 5s infinite; } @keyframes move_lense { 0% { transform: translate(200px, 0px); } 25% { transform: translate(600px, 100px); } 50% { transform: translate(550px, 200px); } 75% { transform: translate(300px, -50px); } 100% { transform: translate(200px, 0px); } } .outer_lense { position: absolute; height: 320px; width: 320px; border-radius: 50%; border: 10px solid; margin: 5px; z-index: 8; } .lense_content { height: 320px; width: 320px; border-radius: 50%; margin: 15px; overflow: hidden; } .lense_content img { margin-left: -120px; animation: move_foreground 5s infinite; } @keyframes move_foreground { 0% { transform: translate(20px, 0px); } 25% { transform: translate(-20px, 100px); } 50% { transform: translate(-50px, 200px); } 75% { transform: translate(-10px, -50px); } 100% { transform: translate(20px, 0px); } }

 <div class="background"> <img src="https://i.ibb.co/fF86YJy/bg.png" height="600" width="800"> </div> <div class="lense"> <div class="outer_lense"></div> <div class="inner"></div> <div class="lense_content"> <img src="https://i.ibb.co/YNt6hbk/fg.png"> </div> </div>