Hi OSUBlake,
I have taken your advice on changing the JS syntax as well as GSAP tweens and syntax changes.
I have also tested the changes in my localhost, and while the performance has improved only slightly when running in Chrome, performance in Safari still suffered.
So I resorted to removing CSS rules one by one.
I realized that this set here is causing a major performance hit in all browsers:
.animation-element {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
-moz-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
-ms-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
-o-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
Project requirements requested by the client include use of drop-shadows on image elements.
So it is likely that the filter CSS rules can be applied to all browsers except Safari browser.
Another discovery I have made: the "image flickering" is caused by applying the Tween onto the div containing the image instead of the image itself.
Making some changes, the unwanted flashing effect didn't happen again.
TweenMax.from(".div-animation-element img", 2.1, {
rotation: -270,
repeat: 3,
ease: Quad.easeInOut
})