Streaming live at 10am (PST)

How to reduce text without losing quality?


#1

I need the text block to decreased during the interaction. I used the Scale parameter to do this, but when I use it, the text quality is lost, it becomes blurred. Do you have any advice on how this can be implemented without loss of quality?

Note: I also wrapped the text block in a div/container. It didn’t.


#2

Hi @Bogette,

Could you share with us the read only of your project?
It would be easier to see what you mean by blurred.

I tried scaling up and down a text with interaction and it doesn’t have the blurring behaviour you describe.

Cheers


#3

Hi @Maximosaurus

Yes, certainly: https://preview.webflow.com/preview/lambada-woref?preview=26cc94658e9a4ddd680ce6585cf0af58


#4

You got a lot of interactions in there :slight_smile:
Could you point me to one that is not working as it will be faster to understand your project.


#5

@Maximosaurus Many of them are not even used :smile:

This text (as an example) is located in section number 5 with the name Div 6.

![Screenshot_56|596x254]


#6

I don’t have any blurring happening on my end.

Have you tried the stage published version on a different browser?


#8

@Maximosaurus I should probably write to support. Thank you!


#9

Yes they may have a more accurate knowledge of this behaviour. Just for the info no blurring on my version on chrome up to date.

Just a lot of overlapping and snappy/jumpy animations with text elements (but might be the design :blush:)

Some times it can be a good thing to try to replicate your setup on a smaller scale project for debugging. You have a lot of stuff named textblock or div and considering the scale of your one page project it’s kinda hard to see clearly where you got it wrong (or if it’s a bug).

I hope you’ll find a way but don’t hesitate if we can help :slight_smile:


#10

@Maximosaurus I wrote in support, and it turned out that this is a Chrome problem in principle. Stack Overflow is overflowing with similar issues and I was advised a strategy to fix this issue.

I am very grateful to you for trying to resolve the issue, but I would also like to ask about another:

You have seen that the site is built on the slider principle. Do you have any ideas how to scroll back? Now you can only scroll forward to the next section, not to the previous one. I would be very grateful for your ideas.

https://preview.webflow.com/preview/lambada-woref?preview=91f865898e1a8b315d643c0b6d364dee


#11

Stack overflow is the holy grail for sure :slight_smile:

As i mention before it will take a long time for me to decompose your project and get my head around how all your interactions are setup.

But the idea would be to have different section which you can scroll of an arbitrary size and use them as trigger fo scroll into view and scroll out of view. It can be really tricky thought as you will need a sort of reset of your animation for it to work again on next scroll.

Another way would be to have only 1 big section and use the while scrolling in view to make all your different sections and elements animate depending on the scroll position.

I recommend this project to have a look at the way he’s setting up interactions

And this is the most recent workshop from pixel geek which will give you very good tips and trick to achieve this kind of design.

Again if you were to replicate your design on a small scale like 2 sections in a new shared blank project would be easier to demonstrate.

Also enjoy the showcase as there is a huge amount of good projects to breakdown.


#12

I was interested in your first idea, and I would like you to tell me more about it when you have free time.


#13

@Maximosaurus I’m trying to think about your idea and I don’t know how it’s going to work. If we create two objects in one section with the scrollintoview trigger, it is quite natural to ask: won’t they conflict with each other? Or I misunderstood you.