Recreating an Award-Winning Website Animation in Webflow

By popular request! And here's the link to the Webflow project so you can explore how it was done: bit.ly/2OXoWvB
Award-winning website: nannalagerman.com/
Whenever we do our "Top 5 websites of the month" videos, we often get comments such as "Can this be done with Webflow?" or "Can you please do a rebuild of this website?".
So, we obliged. Here's a simple but impressive responsive type effect that you can easily incorporate in your next Webflow project.
Please do let us know if we should do more of this type of video 💜
Are you a WordPress user curious about Webflow? We wrote an article comparing the two: bit.ly/387nb4m
Timestamps:
00:00 Intro
0:55 The effect
2:25 Jumping into Webflow
3:10 Creating a scrolling area
3:45 Positioning the text
7:00 Sizing the text
9:40 Creating the interaction
-
Learn how to build custom websites with Webflow FAST:
bit.ly/WebflowWebclass2020​​​...
-
Find me on other social media platforms:
Instagram: / ​​​​​
Twitter: / ransegall​​​​​​​
LinkedIn: / ran-segal...​. .
-
Gear & Book Recommendations: bit.ly/2ohFOuj​​​​​​​
#webflow​​​​​​ #webdesign​​​​​​ #websitedesign​​​​​
Thanks for watching the video!

[@trucmuche747]

It is always nice to hear these words : "without writing any code!!", it sounds like forget you and the years you spent learning!!

It looks so advanced yet, at the same time, so simple! Thanks for adding some sparks to my imagination, I’m definitely using this technique.

[@garyvoigt321]

Love this effect. Thanks for the easy-to-understand breakdown.

[@laurathepsychestudio6998]

Really looking forward to trying this technique! Thanks so much

[@KarmaKattt]

Cool! I love it 🤩 you should do more videos like this!

[@okaforprincess]

you are really amazing! thank you for making my understanding of webflow easier!

[@andyred782]

Problem with your method is on larger resolutions the text will become too big. You should set the body all pages font size to vw’s then use em’s to set the font size. Use a media query for a max container width to snap to pixels. You can use a large container that way and know that on huge screens it won’t be ridiculously big.

[@syhrlhlmy]

Love it, thanks Ran!

[@KarmaKattt]

To add space below the H1 you could also change the H1 Settings to be: Size = 10.8VW and Height = 110%

[@vishal.thakur]

Awesome Video, Ran!

[@dudekillaable]

Thanks. Great Tutorial!

[@psrv97]

Love your content. Really usefull to quickly play and learn.

[@vishalmaurya2280]

Very helpful create some more like these🔥🎁🖤

[@patricwagnerbln]

mega mega !!! thanks danke😉

[@veselingeorgiev80]

Amanzing! Thanks

[@charlottechau3533]

thankyou for ur tutorial!

[@auctober]

learning webflow is possibly the most boring thing i have ever done but i know the outcome and once i start actually wanting to learn this will be amazing

[@FransixWeb]

Wow, nice🙌🙌🌟

[@mohsinjawad5843]

Thanks 😘it's working bro thank you.....

[@robalityquality]

the eyecatching thing on this side for me is the synchronity of mooving and scaling all the parts together. the picture in the back and letters on top. sorry bro, but i love all the rest of your Videos 🥳

[@jimadams6159]

Very nice 👌

[@Grga17]

Regarding the timeframe at 7:32, a "VW" si shorthand for viewport width, not vertical width... I think.

[@tylerbunker9056]

You are right

[@FluxAcademy]

You are right! My bad

[@-ct-celcomtechniques2566]

@@FluxAcademy And also viewport height (vh) from 3:10. I think that there's a lot newbies watching You. You should correct these with KZbin video tool, so they won't repeat those mistakes.

[@shivensoni3223]

Hey Ran, loved the video! How do you stay updated with what's going on in the design community?

[@nellyhernandez7087]

Yay!

[@cr8tivemo]

Great vid

[@balamutinv9684]

Спасибо )

[@pixelpop7650]

What’s your view on editor x now or should I just continue learning webflow?

[@CarlosSanchez-hr6xk]

Really helpful. I miss the Mobile version, as most of the times, users are using theirs mobile.

[@Zatroth]

There is pros and cons, the main cons I see, is offline availability, if somehow can't get a connection the show is over, I rather prefer to pay for a piece of software to stay mobile all the time and anywhere.

[@timelasp]

nice! will you continue to the next video to finish the rest?

[@saiswarupmohanty9428]

Hey dude! Awesome job but I had one doubt...right now I'm trying to give a wall like texture and lining to the background. It's easy to do that in figma but can't understand how to do it here

[@egoiisticprince7977]

make more such videos of webflow animations

[@rubenn3241]

Nicee! Just have one question, on the original website you can see a kind of color change when the two words overlap, can you also do this kind of effect and do you know how to?

[@doyoufeelthemusic]

The blend mode is set to exclusion.

[@FluxAcademy]

Yes, you just have to set the blend mode using a line of custom CSS since Webflow does not natively support blend modes at the moment, but it’s easy

[@feelfuulfiil]

Sorry which app to make "a line of custom CSS" ​@@FluxAcademy 😅😅 ? I just finished this tutorial on my first meeting with webflow, after looking online about "custom line CSS", i still can't understand what it is...😂 It will be nice if you make the continuation tutorial about it 😁 I know this thread was 2 yo, please somebody explain hahaha anyway special thanks to you the guy from flux academy😊👍

[@feelfuulfiil]

I came back to comment 🤣, to make that overlapping effect, you can select the desired text then under Style tab, look for Effect, choose Blending, pick Overlay. But it has bit defect, where the color of the text changed even before scrolling.. 😢😢 still need somebody's elightenment pls heeellllllppp

[@alextheodosopoulos8100]

I'm following almost step by step but cant seem to get the heading to animate. Any clue what might be the issue?

[@Hm444LZ]

hey, when are your courses becoming available again?

[@Shelee]

can u tell me what is website resolution I try 1400:800, 1920:1080 and other more but not working always its bad resolution pls help me for fix that problem(sorry for my English)

[@sany5448]

In phone text are going outside the screen when the ending keyframe comes.

[@matthewcrossland2242]

Where can I buy that water bottle?

[@razvanmuresan6683]

can u try recreating daniel spatzkek s transition into the about page

[@bfewjr]

I'm trying to follow along but when I try to resize the text their not both resizing at the same time even though they both share the "hero-name" H1 title. Can someone help me understand what I'm not doing right? I'm new to webflow.

[@Svetlana-hk3mm]

Is your problem solved? It has been 2 years since you texted it.

[@bfewjr]

@@Svetlana-hk3mm I gave up on this and webflow

[@kvncnls]

Hey Ran, can you do the same thing with Editor X?

[@liam2246]

The text scaling yes, but not the scroll animation atm. Scroll animations are coming soon

[@pablopicoso]

Nice but not nearly as smooth and the last name drops about 2% first for a natural smooth move How can you smooth the movement, since yours is so rough?

[@nuzooh525]

I believe you have to add some custom code to force the mouse wheel to scroll smoother. If you use the scroll bar to test, it's smooth but when you use your mouse wheel its very jagged. I did find some example here at the webflow site, search for : Smooth-scrollbarsmooth-scrolling and gsap-tweenmax-scroll

[@rubengisbert9970]

the text appears a bit pixelated, anyone knows what to do ?

[@zuhranahmed]

Did you host your projects on Webflow's Hosting Plan?

[@dmk-ki4ny]

Please fix the link in the 'Learn how to build custom websites with Webflow FAST:' section.

[@rychei5393]

There's an opacity setting not discussed.

[@sany5448]

the animation is not working good in phone, landscape, and tablet