Hello everyone! I use WebFlow for a few days, and knowing that this is a very powerful visual editor of sites that first of all focuses on animation, I want to know: Is it possible to create with the help of web-based tools the same or similar animation of the text: https://minglabs.com/en/work
And whether it is possible to make by means of scrolling so that this animation at the certain moment on page disappeared, and another appeared? Again, the sample on the site
And if, please, if you have free time, tell me how. This is an awesome text animation
Ok, specifically on the text I don’t think there is a native ‘quick’ way to achieve that…
It’s not something i’ve tried (but will update here if I get time) but perhaps setting some of the text as span elements within the text, and then targeting the normal text and span text with slightly different scroll/timed animations could achieve a similar effect…could be time consuming, but could work.
When it comes to more complex text animations, some users find examples from Codepen, and then embed/implement them in their sites.
I decided to share with you a joyful experience. I managed to create exactly the same animation: http://bogdans-stellar-project.webflow.io/ . And yet, thank you for those materials that you sent in response to my question, but, unfortunately, there is little said about how to make such a scrolling text: that at a certain position of the site the text disappeared and the other appeared.
positioned the 1st ‘text block’ absolute, and also a ‘text block 2’ in the same position (they appear to overlay each other in the ‘Designer’ view).
In the first text block, each word has a ‘span’ with a class name of first, second, or third fade.
The text block 2 is just text for now, but would also have spans if you were building this out.
I’ve set two ‘scroll into view’ interactions and used different offsets to trigger. So when the second section scrolls into view it affects opacity on those text blocks in the first section. When it scrolls out the opacity is reversed.
One of these interaction deals with the first text block, fading opacity to zero at staggered intervals (and then back to 100% on scroll up)
The other deals with showing text block 2 after a certain amount of the second section has come into view. (and then back to 0% on scroll up)
There may be other ways to achieve the same - the community is full of ideas and brains
There may be other ideas out there, this approach was put together very quickly at the time. What i’ve done there is created a text box, added text, and then selected individual words at random and given them a ‘span’.
This then enabled me to target the 3 different spans to fade out at different times. If you increased it to 6 for example, it would be even closer to the original you were hoping for. It’s a bit time consuming to set up - as I say there may be others with a better approach with more time!
It was necessary to immediately act on your advice and create animation in webflow. I created this animation in 3 minutes And I think if I add more “span” - it will be even better than on the sample.
But I encountered a small problem, and I would like to ask you to help me. How to move a “span” (the word) to another line? I try, but the span disappears. Maybe the question is stupid, but it requires your help, please