Text effect when scrolling

Design help Animations & Interactions
1

Hey guys, I wanted to create a text effect as shown. Would be cool if some one could help!! ::slight_smile:

text-effect
text-effect940Ă—872 3.06 MB

Here is my public share link: LINK
(how to access public share link)

1 Like
2

You can use IX2 to make a transform on scroll

You can duplicate this site to check how the example is made (link in navbar)

https://sbx.webflow.io/text-transform-on-scroll

3

Hey Vincent, thank you for your answer! My problem is that I want the text to transform only when I scroll fast and then just returns to normal. Right now it just does the effect but is not going back to a normal state.

Hope you understand what I mean :slight_smile: I was trying a lot but could not find a way…

https://preview.webflow.com/preview/felixs-groovy-project-6be6d8?utm_medium=preview_link&utm_source=designer&utm_content=felixs-groovy-project-6be6d8&preview=2e0b2cdec66c87c443d6377ebb9a11fb&pageId=5e922c8213fb2243f62c94d1&mode=preview

4

Nah, this won’t cut it - totally different look and feel. I tried to replicate this sort of behaviour with ix but it’s just not the same :smiley:

I would actually be interested to see a solution to this. Obviously some script library will be necessary but I am too lazy to search for one myself, haha

6

Ah okay if even you dont know it is maybe then impossible :sweat_smile: Really a shame would like to use it on my portfolio…

7

No, it is possible, but I never made this sort of effects before.

See here

1 Like
8

And actually @mistercreate has you covered!

edit: the post on forum

9

Ahh nice thank you very much!!

1 Like
10

Men you saved me alot of time! Do you also know how I can freeze the interaction on the text when I go out of the trigger field? Now it is just snipping back…

smooth-interaction
smooth-interaction1280Ă—720 1.96 MB

11

Impossible with vanilla wf interactions I am afraid.

12

Haha okay such a pitty would be much smoother…

13

I would be so happy if wf would allow for separate smoothing on enter and exit of the triggers. Then you’d set the exit trigger smoothing to be high enough to not have the abrupt snap…

14

Yeah would love it. But do you think it could be also done with extra css code?

15

Likely with js code, not css. I cannot say for certain but it is possible I think

16

Hmm ok then I will check if I can find something

1 Like