4

I'm currently building a landing page with some css animations (pretty basic fade-ins). I initially set animation-play-state: "paused" in my css file, and later on access it with jQuery while scrolling the page, to trigger the animation.

Works perfectly fine on Chrome on my Mac, but trying to run it from both Safari and Chrome on my iPhone does not seems to work.

I inspected the console logs and debugged it as far as I could think, everything seems to work but the actual animation does not run (however the animation-play-state is changing to "running".

Last thing to add, if I put the $(".row").css("animation-play-state", "running"); statement before the if statement, it does exactly what it supposed to do.

My jQuery statement is:

//the position where I want the animation to trigger

var destinations = $('#destinations').offset().top - 300;

//the event listener

if($(window).scrollTop() > destinations) {
        $(".row").css("-webkit-animation-play-state", "running");
        $(".row").css("animation-play-state", "running");
}

Anyone knows the problem? Thanks a lot in advance! Niv

Niv Shani
  • 41
  • 2
  • `Last thing to add, ...` --> you mean by this that if you put before the if it works everywhere ? – Temani Afif Mar 10 '18 at 19:08
  • No, what I think he means is the if statement isn't working properly. Additionally, I don't have an iPhone, so I can't help you with this one, just thought I should point that out. – Neil Mar 10 '18 at 20:04
  • Thanks! Actually Temani was right, it works anywhere else outside the if statement. The flow enters the if statement, doubled checked that. – Niv Shani Mar 10 '18 at 20:36
  • Doesn't make any sense. The analysis of what' going on must be flawed. – Roamer-1888 Mar 10 '18 at 21:37
  • I agree, but I can't figure out the problem. Ended up setting the initial CSS `animation-play-state` as `running` with media queries for different device widths. Still work smoothly on desktop Chrome and doesn't on desktop Safari... – Niv Shani Mar 10 '18 at 22:15
  • So `.css()` effects the style of the element not the CSS Styling. When the `if` is `true`, all `.row` will get `style="-webkit-animation-play-state: running;"` appended to the element. Is there more than one `row`? What other CSS is effecting this element? Do you see, when inspecting, (via Safari or Chrome with Mobile testing) the style attribute being appended to the element? Your post leaves a lot to the imagination and a more complete example would help. – Twisty Mar 13 '18 at 05:56
  • Hi @Twisty , thanks, sorry for the misunderstanding! Yes, I can see the style appending to the elements in the inspector (both Safari and Chrome), and yes there are 3 .row elements. There is the initial CSS effecting these elements, and animation-play-state is set to ‘paused’, but anyway element style override stylesheet style, so I don’t see why it doesn’t work. – Niv Shani Mar 13 '18 at 06:33

1 Answers1

0

Faced this issue today. I've was changing animation-play-state, to create nice reveal animation.

There was also animation-fill-mode: both; defined.

I used keyframes like this

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

And nothing seem to help in Safari. Mine tested version is 11.1.2 (13605.3.8) (Stable at this moment) and Safari Technology Preview Release 63 (Safari 12.1, WebKit 13607.1.2.1), on Macbook as well as iPhone - result is same, no animation playing.

TL.DR. You can't simply change animation-play-state in Safari. Try to change animation-name property

I was lucky to use opacity and transform to reveal elements, so this hacky temporal animation name helped me:

@keyframes be-hidden { from { opacity: 0; } to { opacity: 0.0000001; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } div { animation-name: be-hidden; animation-duration: 600ms; animation-fill-mode: both; animation-delay: 500ms; animation-iteration-count: 1; } div.revealed { animation-name: fade; }

Set animation-name to some temp animation, which will hide elements, then change it to other (.revealed class)

If there is another way to resolve this issue, I will be happy to see it.

Possibly related: https://stackoverflow.com/a/33272708/3278855

ColCh
  • 3,016
  • 3
  • 20
  • 20