Wednesday, August 1, 2018

changing animation delay using j Query while animation is paused does not work on Safari but it does everywhere else

By Hường Hana 10:00 AM css, jquery, safari Leave a Comment

I set up a keyframe animation in CSS. Attached it to a DOM element and set it to pause. With javascript (jQuery), I am changing the animation delay from 0s to 100s achieving a nice animation while scrolling.

This works well on all of the browsers, but not on Safari (Version 11.1.1 (13605.2.8)).

$(document).ready(function() {        fluider([          {            selector: '.manualAnim',            start: 100,            end: 500          },            {            selector: '.manualAnim2',            start: 500,            end: 1000          },            {            selector: '.manualAnim3',            start: 0,            end: 1500          }          ])      })                  function fluider(o) {        for(var i = 0; i < o.length; i++) {          $(o[i].selector).css('animation-play-state','paused');          $(o[i].selector).css('animation-duration','100s');        }        $(window).scroll(function() {          var h = $(window).scrollTop();          for(var i = 0; i < o.length; i++) {                    $(o[i].selector).css('animation-delay',-clamp(0,100,((h-o[i].start)/o[i].end * 100)) + 's');          }        });        }            function clamp(from, to, val) {        if(val >= from) {          if(val <= to) {            return val;          }          else {            return to;          }        }          else {            return from;        }      }

   body {        height: 1000vh;      }      .manualAnim {        position: fixed;        display: block;        width: 100px;        height: 100px;        background-color: red;        animation: 100s anim paused both;        animation-delay: 0s;      }            .manualAnim2 {        position: fixed;        display: block;        left: 120px;        width: 100px;        height: 100px;        background-color: red;        animation: 100s anim paused both;        animation-delay: 0s;      }            .manualAnim3 {        position: fixed;        display: block;        left: 240px;        width: 100px;        height: 100px;        background-color: red;        animation: 100s anim paused both;        animation-delay: 0s;      }            @keyframes anim{        0% {          background-color: red;          transform: scale(1);        }        30% {          background-color: green;          transform: scale(1.5);        }        60% {          background-color: blue;          transform: scale(0.5);        }        100% {          background-color: yellow;          transform: scale(1);        }      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="manualAnim"></div>  <div class="manualAnim2"></div>  <div class="manualAnim3"></div>

I Googled a ~~few hours~~ days for now, but I have no clue what could be the problem. Any idea?