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)
Hope this helps.
To change the animation speed, just tweak the transition duration per your needs.
The line starts to expand as soon as the area is scrolled into view.
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
final question on this: what to change to draw it from the right?
That depends on your block setup.
For instance, you can assign align-self: end; to the line, if the parent block is a flex container.
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
If setup properly, there are no limitations in terms of CSS properties.
You can animate everything.
I finally got it, one has to use the class “aos-animate” (I guess it is a global class, is there a list of these somewhere documented?)
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.
