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? [ezgif.com-video-to-gif (1)] Here is my site Read-Only: LINK ( how to share your site Read-Only link )

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 [image] JavaScript setTimeout() – How to Set a Tim…

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: Demo Project share link

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…

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. :slight_smile:

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.

[image] vio-webfl: The Chris solution is great 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!

So, something like this? @Stan :slight_smile: Tried to publish, but might be missing something. [Screenshot 2023-05-02 at 11.17.51] [Screenshot 2023-05-02 at 11.17.45]

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…

You 2 are my heros. Thank you so much! Have a great week

hi @vio-webfl I updated the custom code a while ago with setTimeout

Highlight text effect

Design help Animations & Interactions

vio-webfl (Rasmus Stje) May 2, 2023, 3:47pm 10

Is there any way for it to delay until page load or make it slower?

Topic		Replies	Views
Text effect when scrolling Animations & Interactions	14	4834	April 15, 2020
Custom Text-Outline Cursor-Hover "Fading" Effect Idea Animations & Interactions	0	1108	July 23, 2022
Scrolling text effect Animations & Interactions	2	4558	March 27, 2019
Type/Text Reveal on page load General	3	1884	June 25, 2020
Fade in interraction Animations & Interactions	1	911	September 2, 2019

Highlight text effect

Related topics