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.

http://vincent.polenordstudio.fr/snap/ioy51.mp4

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.

http://vincent.polenordstudio.fr/snap/ioy51.mp4

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.

Gradually, new technologies are changing the minds of users, making everyday and routine things easier, leaving more time for self-development and hobbies. Guys, what do you think, is there a program or something on this site 4ProMedia, that can help solve this problem? There are a lot of new technologies now, and there are some that we don’t even know. Do you agree? Let’s talk about Latest Tech News that you know and have already used, okay?