-
Stefan
But i don’t get it to work:
class, owd-fade-in
.own-fade-in { animation: owd-fade-in linear forwards; animation-timeline: view (); animation-range: entry; } @keyframes owd-fade-in { 0% { opacity: 0; transform: translatey(480px) } 50% { opacity: 0; } 100% { opacity: 1; transform: translatey(0px) } } }
And I see in the customizer this parts in red,
animation-timeline:
animation-range:why is this happen?
Thanks -
Hi there,
The Customizer > Additional CSS field in WordPress only parses CSS that is Level 2 or below. So perfectly valid CSS that is of Level 3 will get flagged red.
The issue here will be a Animation on Scroll requires Javascript. Do you have the script that accompanies that CSS?
-
Stefan
-
The CSS
animation-timeline
API has limited browser support – see here:https://caniuse.com/?search=animation-timeline
So you need to be careful in using them as on the unsupported browsers you may end with elements being hidden.
For that reason I would recommend using a JS solution.
-
Stefan
Thanks David, you have a script with java in hand?
Thanks -
George, one of our designers, provided this tutorial:
And it uses a lightweight JS framework
-
Stefan
Hi David,
Thanks a LOT!.
Followed this
But it won’t initialize, the script, is all uploaded, see the images below;And in the source code, I can see the files, but not at the Advances attributes, the options to change.
Regards
Are links not showing? here again
https://ibb.co/gSjjTN9
https://ibb.co/QQ3jX3Q
https://ibb.co/djSxk4G
https://ibb.co/104gYTG -
Fernando
Hi there,
You need GenerateBlocks Pro to use the custom Attributes feature.
-
Dear Fernandos,
It works with the Plugin “Attributes for Blocks By websevendev” too.Thank you and Thanks David for the idea with SAL from mciastek.
Regards -
Fernando
I see. You’re welcome!
- You must be logged in to reply to this topic.