Can animation-timeline be used on multiple selectors?
So what I am trying to achieve is applying multiple animations with an animation-timeline property being set on "scroll();". I was refering to Kevin Powell's video for the parallax for this (https://www.youtube.com/watch?v=Qj0Qx8HpNUo&). The issue I am facing right now though is that as soon as I hit the animation-timeline property on more than 1 selector inside my CSS that it's not working on scroll. The animation itself is correctly defined (no spelling mistakes) and set properly with the animation-property and works in case I remove the animation-timeline property provisionally and set an animation-duration of e.g. 1s. So I wonder if it's possible at all to have multiple scroll driven animations or that I have to rely on a grid stack?
Kevin Powell
YouTube
True parallax with CSS-only is now possible
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=cssparallax 👈 Interested in levelling up your CSS game? I’ve got courses!
Parallax effects can be cool, but I’m always told the CSS-only solutions aren’t “true” parallax. Well, thanks to scroll-timeline: scroll(), we can now create true parallax effects without on...
7 Replies
One thing is with a scroll() animation-duration should be set to auto as setting a time doesn’t make sense anymore.
The syntax has changed since this video.
Can you share your code ? There’s likely some properties and values that have changed and aren’t valid anymore making your code unrecognizable to the browser.
I was actually trying it out on two things inside of a codepen which there works just like a charm, but once trying in my app, it doesn't work at all...
Here's the codepen so you get what I try to achieve: https://codepen.io/Proudyy/pen/rNRNdXO
Here's the codepen so you get what I try to achieve: https://codepen.io/Proudyy/pen/rNRNdXO
Try adding an animation-duration: auto. This code pen isn’t working for me, probably my browser or that there’s not enough content to trigger the scroll default, there needs to be a scroll bar on one of the parents.. it’s still experimental and not supported in safari or Firefox but I’m trying on chrome and it’s still not triggering
what browser are you viewing your web app code in when not using codepen?
but isn't codepen itself usign 
to render it's content of the codepens? 😮
i don't know if you can refer @ this point to this demonstration of how it works made by the vid I just captured but this is how it should look like using an 
browser which itself is based on . I have seen it works on 
edge as well:
to render it's content of the codepens? 😮
i don't know if you can refer @ this point to this demonstration of how it works made by the vid I just captured but this is how it should look like using an browser which itself is based on . I have seen it works on edge as well:I mean when you’re outside of codepen, viewing locally what browser are you opening your file in? I wouldn’t be surprised if codepen uses some kind of polyfill . Have you tried in other editors like tailwind play or icodethis or js.fiddle ?
I have no idea
codepen uses whatever browser you use to open the codepen, unless you're talking about the little preview that generates for embeds, then that's potentially done with a headless chromium (but that's a pure guess)
Sorry for the late reply, I am using GX which is based on ... Also, I haven't tried out to copy the approach inside other editors you mentioned yet, I will in new year probably continue to work on that. Thanks in advance though already! 🙏
GX which is based on ... Also, I haven't tried out to copy the approach inside other editors you mentioned yet, I will in new year probably continue to work on that. Thanks in advance though already! 🙏