CSS Animation snaps to end state when triggered in Safari

Question

I am building my portfolio with a Wordpress plugin called Semplice and am using ScrollMagic to trigger CSS animations to reveal content on scroll.

Everything is working wonderfully in Chrome and Firefox but in Safari (both on Mac and iOS) the animation directly snaps into its end state when triggered.

You can find an example here: http://tilokrueger.com/work/fade/

This is used to trigger the animation:

jQuery(document).ready(function ($) {
var controller = new ScrollMagic.Controller();
$.each($('.has-animation'), function (index) {
var scene = new ScrollMagic.Scene({
triggerElement: this
})
.setClassToggle(this, "on-screen")
.addTo(controller);   
scene.addIndicators();
});
});

This is used to animate the content (using Animate.css):

<div class="has-animation">
<style type="text/css">
#test3{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}

.on-screen #test3{
-webkit-animation-play-state: running;
animation-play-state: running;
}
</style> 

<div id="test3" class="animated fadeInDown">
<p data-line-height="50px" data-font-size="50px" style="text-align: center;"><span style="letter-spacing:0.5px;"><span class="semibold"><span class="bold">TEST FADE</span></span></span></span></span></p>
</div>
</div>

Any help would be greatly appreciated as I have been struggling with this issue for weeks now not being able to find a solution.

Thanks in advance!

Tilo

CSS Animation snaps to end state when triggered in Safari

0 Answers0