Edit for clarity: I’d like to increase some text by a large amount, triggered by scrolling, without it pixelating.
Hi all, apologies, i’m a beginner and struggling big time with interactions, but can anyone work out how to get the ‘New big text’ text block (which says Test) to do the same as the big ‘UTOPIA’ text (which is an svg background of ‘Trans word bg’ div). I want them both to zoom towards the screen / increase in scale.
I managed it using ‘scale’ but so far I’ve found that using ‘scale’ in the interaction blurs the edges (when increasing by a large amount) but using ‘size’ doesn’t, and I want it to be clean so i’m trying to do it with ‘size’.
The problem i’m encountering is that ‘size’ affects the size of the Utopia svg…(which is what I want) but it affects the movement (y and x) of the big ‘Test’ text (which I don’t want and don’t understand). It has me baffled. I’ve tried all sorts of arrangements but can’t crack it. Any ideas very welcome , Thanks!
It’s left me wondering if interactions can even increase the size of fonts (without blurring the edge) at all. I’m not a coder so don’t know the equivalent code for such a thing.
The text that you do not want to move is currently inside of the div you’re telling to size up. Move the text outside of this div to avoid it from moving.
Hi. Thanks for your response and annotation but I want both to move, in the same way. Currently Utopia moves towards the viewer and test moves diagonally up/left. I would like both to move towards the viewer.
Ok, I thought I might be misunderstanding it.
In this case, you’ll still probably need to move that text outside of the container with the current size interaction.
What you need to do then is add the second element to your scroll interaction as shown in the screen grab. Select that text and then click within the scroll animation interface. This will allow the elements to move independently.
Cheers. To be honest I don’t want them to move independently… I’d like them to move together so I thought using the same div would do the job.
…but I’ve tried your suggestion and, again weirdly, the TEST word gets effected in a different way to the UTOPIA word. even though i’ve used exactly the same settings on each, UTOPIA stays fixed and zooms in (sizes up correctly) but TEST word doesn’t stay fixed or size up. Instead it just moves away.
After many hours on this i’m pretty convinced the ‘size’ interaction can’t affect Text in the way it’s supposed to. It seems to act like ‘move’ instead. I’d be so happy if anyone can prove that’s not the case.
Have a look, see what you think. :
Again sorry It’s difficult to know exactly what you’re going for.
So in this case you will need to use the scale property to size it. As I’ve tested this doesn’t blur the edges like the svg does.
Thanks for your assistance on this. That’s exactly what I’m looking for yes.
…but when using scale to say ‘10’, the image pixelates, even though it’s a standard font, which is why i’d like to use ‘size’ because it keeps it smooth.
When using ‘scale’, It looks smooth in the designer but viewing it with the eye or publishing it shows it as pixelated.
See the pic. Left is UTOPIA using 'size. Right is TEST using ‘scale’.
Chat gpt has told me this :
Got an awesome response from Diego at webflow support here: Loom | Free Screen & Video Recording Software | Loom
He says fonts aren’t able to scale using interactions without pixelating but it can be worked around by setting the font size in the designer to a very large REM (eg 100) and then kind of reversing the process by starting the interaction scale setting at 0.25 or something rather than starting at 1. Then finish on 1.