Support for animation-timeline?

Support
#1

I was working on a scrolling keyframe and tried to use animation-timeline: view(); but it looks like this isn’t supported. Any ideas on when we might get support?

#2

Hey @mgalindo,

Thanks for writing in! Please be advised that the CSS animation-timeline: view(); is not supported by some modern browsers yet. You can check it here:

Cheers.

#3

That doesn’t answer my question.

I’m well aware of the browser support, but this is not a browser issue, same exact CSS and keyframe works just fine (in the same browser) in JSFiddle or any other code sandbox.

#4

Hello @mgalindo,

If your code does not work when the theme is active, there could be a conflict with the name. Please post the whole code that you were testing out so we can double-check it whether it is supported or has a conflict.

Thanks.

#5

You can see a working version (Chome) using 2024 theme here: https://staging.crestmarkinsights.com/sample-page/

Below is the code (note that if you’re using another browser you may need to modify the prefixes) :

.scroll-effect {
  scale: 0.25;
  opacity: 0.1;
  -webkit-animation: opacity linear;
  animation-timeline: view();
}

@-webkit-keyframes opacity {
  to {
    scale: 1;
    opacity: 1;
  }
}

Also note that I’ve tried using the Image element with the class attached, as well as a Raw element using the img tag and adding the class directly to the image. Neither produces any positive results. As you can see from the link provided, the keyframe works just fine in WordPress outside of the Pro theme.

#6

Hello @mgalindo,

Please have your code updated and use this:

html {
    overflow-x: visible;
}

.scroll-effect {
  scale: 0.25;
  opacity: 0.1;
  -webkit-animation: opacity linear;
  animation-timeline: view();
}

@-webkit-keyframes opacity {
  to {
    scale: 1;
    opacity: 1;
  }
}

The hidden x overflow creates a conflict with the animation-timeline.

Cheers.

#7

Ah, I had tried updating overflow on nearly everything except HTML. Thank you.

#8

You are most welcome, @mgalindo.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.