I am trying to achieve an animated mask that hides and reveals portions of ImageA over ImageB. I have achieved this but there is some jitter with ImageA.
All overflow is set to 'hide'. I had to have a div that is rotated, put an image in that and rotate it the opposite way so the image doesn't appear rotated. If I resize the div, the image slides out of position. If I change the "left" value for the div, the image moves with it (as it should). I have tweens to counter these slides and this is what is causing the jitter.
I have the source up and an illustration (at the bottom of the source) showing how I rotated a div and have ImageA counter-rotated inside of it. There is a black box at the top of the example screen that lets you scrub the timeline to view it again.
Animated Diagonal Mask
in GSAP
Posted
Hello,
I am trying to achieve an animated mask that hides and reveals portions of ImageA over ImageB. I have achieved this but there is some jitter with ImageA.
All overflow is set to 'hide'. I had to have a div that is rotated, put an image in that and rotate it the opposite way so the image doesn't appear rotated. If I resize the div, the image slides out of position. If I change the "left" value for the div, the image moves with it (as it should). I have tweens to counter these slides and this is what is causing the jitter.
I have the source up and an illustration (at the bottom of the source) showing how I rotated a div and have ImageA counter-rotated inside of it. There is a black box at the top of the example screen that lets you scrub the timeline to view it again.
http://morning-eyrie....herokuapp.com/
http://morning-eyrie...com/source.html
Is there a better way to do this? Should I be using canvas instead?