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
From a brief look - I would say…yes! Webflow has a scroll into view and out of view interaction, amongst others. It will take some time to fully master as there is a lot to take in…
Everything on this page for example was made with Webflow’s own Interactions 2.0: https://webflow.com/ix2 - so if it’s possible there…
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.
Second section:
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
I made dozens of attempts to use the code. This only leads to problems.
I decided to recreate the text animation with standard webflow tools based on your example.
But I was faced with incomprehension. Tell me please, how did you insert the text blocks INTO THE TEXT BLOCK? I would like to do the same, but I do not understand how. Can you help me?
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
Indeed what @Bogette is trying to achieve works with the same principles as my animation
Mainly I think it works by having different text blocks that you cycle by turning the opacity down on the previous at the same time you turn it up on the next one.
I checked your preview @Bogette and is actually amazing the animation that you created!
I’m flattered to hear such words. I’m surprised how many ways you can achieve the necessary results in webflow. Thanks for the detailed instruction, you are helping people like me