Streaming live at 10am (PST)

Can I make the same (similar) text animation in Webflow?


#1

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


#2

Hi @Bogette

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…

You’ll find this overview video useful too: https://webflow.com/workshop/an-overview-of-webflow-interactions-2-0 - and also a number of Nelson’s videos Oct/Nov/Dec too where he looks more specifically at individual cases.

A great place to start is: https://university.webflow.com/article/intro-interactions

@Aaron also does some great text based tutorials - including one for horizontal scrolling, which you may find useful: https://webflow.com/blog/creating-horizontal-scrolling

:slightly_smiling_face:


#3

Actually, I’m concerned not so much with scrolling as with the animation of the text. Is this possible in Webflow?


#4

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.



Hope those are useful…


#5

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.


#6

Excellent - i’m just working on one similar - will share in a few minutes :grin:


#7

Hi Bogdan,

Yes, those other forum posts I sent were just to show how Codepen solutions can be implemented if you found one which had a similar effect.

Natively, have a quick look at this example I made just with Interactions 2.0:
http://staged-text.webflow.io/

The share link is here, so you can take a look at the construction too:
https://preview.webflow.com/preview/staged-text?preview=55d9c69229a28f22affcf5d49a4f8a24

Only a rough concept, but what I have done is:

First section:

  • 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 :slightly_smiling_face:

Hope that is helpful…


How to make a scroll?
#8

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?


#9

Hi @Bogette

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!

See below for details about styling and spans:


#10

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


#11

Hi @Bogette

Can you share the preview link - i’ll take a look at the settings…


#12

https://preview.webflow.com/preview/people-5d6ed0?preview=aef832819e1454c1e02359b8ca344065


#13

Excuse for troubling. I already understood the reason for this problem. All decided


#14

Great, glad you got it sorted!

I just thought you might also be interested in this post too:

It’s a different technique to what you are trying to achieve - but another interesting way to use spans and animations :slightly_smiling_face:


#15

Thanks for citing my post @StuM

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!


#16

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