Hey there!
I discovered webflow a few weeks ago and have fallen in love with this program - luckily I’ve been able to self teach myself with all of the amazing tutorial videos and the great forum posts here, however starting work on my second project, it looks like I’ve finally found myself stuck with no solution in sight.
Here is my site Read-Only: LINK
Here is my site Published: LINK
Site Summary:
I’ve been attempting to integrate responsive design into this site’s hero animation, basically when you highlight parts of the title, an underline is animated across. Also, when you scroll down to the part of the page that is linked to the part in the title, the title is highlighted permanently. (also, after 1 second the title flashes + “<- click me” appears.)
The Problem
I’ve managed to get all of my planned animations working, however my issue now is getting this to work responsively on tablet, mobile, or weird shaped monitors e.g. ultrawides or 3:2’s. When I try to view them like that, the underlines get bunched up into the text and don’t scale properly, making an absolute mess.
Does anyone have any tips for what I’m doing wrong e.g. VH/VW scaling vs pixel? Im guessing you probably shouldn’t be using absolute positioning, however I couldn’t figure out another way of getting my lines as close, as well as have “<- click me” located that close.
Also, in an unrelated note - is there any way to run a loop animation affecting the color of a text, while being able to also apply a hover effect that also modifies the text as an override without JS? My current bandaid for this is to duplicate the title text and apply the loop effect to the upper one and hover on the bottom one, but since you can’t hover on layers below other layers, I’ve made it so that the top layer only appears when the loop runs. Its a little messy, and the layers are clearly not lined up on smaller form factors.
Thanks for taking the time to read through all of this!
TL:DR How do I design/scale text responsively for other formfactors when using absolute positioning? Should I be using it in this case, or is there a better way?