Any idea on this? (e.g. drawing a line when entering the viewport starting with zero width and drawing it horizontally to 100% within a defined time frame)
Just thought I could do that with a div block and its borders, but I don’t know yet how to set the starting size (e.g. width = 0) and the final size (e.g. width = 100%), but I can’t figure out how to do this with the effects option (as I need 2 instances, one for the starting value, one for the final value)
many thanks, worked, a tricky one (for me), one has to understand that relative styling must be linked to timing effects settings, and scrolling trigger and effect has to be set within the advanced option to make it all work
I am trying to do the same with the property “height”, but that does not seem to work, could it be that that property is not accepted? As a set-up I did the same as for the width case, and I ensured that a respective height of the div is given
It’s not a global class, it’s specific to that option - animate on scroll (aos).
You need to use it to make it work (loading the script).
You actually only take advantage of the scroll trigger and leave all other options aside, this is why you need to reset that feature by giving it a duration of zero, as you don’t want to use one of the presets.
You might want to use the anchor option though, to control when the class gets added, depending on your block position relatively to the viewport.
Downside of this method, you also load all the CSS which is attached to this functionality, which you don’t use at all.
Instead, for an even more optimized solution, you could load the script where needed via code block and optionally taking advantage of the fragments feature.
But that’s only recommended if you don’t use the animate on scroll feature as intended, as demonstrated in the video above.