Two questions about animation in BSS:
Animation ‘presets’/‘classes’: Is there a way to create the equivalent of an animation ‘class’, so that an animation that is used in many places (eg. an entrance animation that is applied everywhere for consistency) can just be tweaked in one global place?
Triggering CSS depending on scroll position: The animations available in the animation pane are great for entrance animations. I can see that it uses data classes which BS provides. How can I use this to trigger non-entrance CSS changes?
Example: Say I have a div, and I want to trigger its backdrop filter to change from 0 to 1 when the user scrolls to a certain position. How would I do that? This is different to the animations in the animation pane, because the div does not need to be ‘entranced’ - it needs to exist immediately. A CSS change (transition) simply needs to occur for a div/element based on page scroll position. It seems like all the data classes exist for such an implementation, as they allow the detection of the user’s scroll position. I just can’t work out how to use it as a trigger for whatever CSS transitions I want (ie. any purpose other than entrance animations).
Hope I explained that well enough. Any thoughts or examples I can check out?