Hey forum,
I love the dovetail.com effect on their website (see image attached), where the text is highlighted after load. Anyone got any idea how to do this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
My thinking would be an interaction on page load. Create a wipe with a move effect, some z-indexing, and a couple of divs (if you wanted to keep things native to Webflow).
You could do MUCH better but as a quick hack:
1 Like
hi @vio-webfl here is another possible solution that is more dynamic. @ChrisDrit solution is fixed this mean when you change one letter anywhere in your sentence the word background becomes offset.
Usually, these effects use pseudo-classes : before and/or :after These can be animated easily with eg :hover but there is no natural way how to animate these on eg. page load. In this case, you need to use a small trick that uses CSS variables.
In this case, your background will always dynamically follow your text wrapped in <span>. Im adding DOMContentLoaded only because you are asking for on-page load animation but this trick works even without it. It is just principle.
Here is a very simple example of how it works to have something to study and dive deep into Web API and CSS documentation if needed. Hope this will help
2 Likes
Amazing both of you @Stan @ChrisDrit. Appreciate the effort!
The Chris solution is great, but If we wanted to try out the Stan code pin, how would we go about it an implement it? Just add the HTML/CSS in the page and how about the JS? Maybe I am overthinking this. 
hi @vio-webfl for custom code WF provide embed element or areas head and before body end for custom code in page settings. This is all you need for simple implementation like this.
Realize, this was just a quickie example to help guide you, not at all a full blown solution. The issues described are easily overcome with a bit more put into it and keeping it all within the Webflow designer. Hope that helps!
1 Like
hi @vio-webfl you are missing important <style> and <script> tags.
Before you use custom code please find many solved issues on this forum or visit WFU to learn how to apply custom code.
Anyway, here is an example in WF to study.
Remember that JS doesn’t work in WF Designer but only in published Live previews.
I hope this will help to solve your request.
You 2 are my heros. Thank you so much! Have a great week
Is there any way for it to delay until page load or make it slower?
yes, at this time FX invokes when the page load. You can delay function invocation using setTimeout. How much time will take from 0 to 100% is set in CSS (currently 1s)
here is an article to read in case you do not know what setTimeout is
Good luck
If you do not have further questions feel free to close your request as solved as the requested functionality was provided
1 Like