Streaming live at 10am (PST)

Fade in/out effect for texts are not working

Hey Webflowers

I am having a small issue with that size interaction by scrolling between sections. As you can see when you scroll down the titles are fading in/out. I don’t know how to explain this but when the second title appear ( CONTROL SMART HOME DEVICES EASILY ) it appears very weirdly and not stable ? Its like its adding the words next to it from down. I hope you know what I mean ^^

A basic solution would be importing them as svg from Illustrator but I would like to do it natively on webflow

https://jin-design-2-5.webflow.io

thanks a lot !

Still working on the website, its just for DESKTOP ! not responsive for other devices.


Here is my public share link: [https://preview.webflow.com/preview/jin-design-2-5…]

Nice site, nice use of Fullpage.js.

Ok so what happens here is that you’re progressively enlarging the container of the title, the .main-header element. And as this container is enlarged, the text inside if progressively un-wrapping: at each frame of the animation, the text tries to fit the best in the given container width.

What you need to do to prevent this is to wrap the text in another div and give this div a fixed width. .main-header element should then get overflow:hidden. Now this element acts more like a mask than a wrapper, as the new div inside will not be affected by its width.

1 Like

Oh Vincent, thank you so much, I knew that the solution should be so easy, I did the exactly same thing directly with min width on the text element but not in a DIV so it works now perfectly ! thank you so much !

btw does the website work smoothly on your device ? cos some of my friends are facing problem.