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.
@@FluxAcademy And also viewport height (vh) from 3:10. I think that there's a lot newbies watching You. You should correct these with TH-cam video tool, so they won't repeat those mistakes.
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 🥳
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
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.
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?
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😊👍
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
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)
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.
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?
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
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
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.
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.
To add space below the H1 you could also change the H1 Settings to be: Size = 10.8VW and Height = 110%
Love your content. Really usefull to quickly play and learn.
Regarding the timeframe at 7:32, a "VW" si shorthand for viewport width, not vertical width... I think.
You are right
You are right! My bad
@@FluxAcademy And also viewport height (vh) from 3:10.
I think that there's a lot newbies watching You. You should correct these with TH-cam video tool, so they won't repeat those mistakes.
Cool! I love it 🤩 you should do more videos like this!
Love this effect. Thanks for the easy-to-understand breakdown.
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 🥳
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
you are really amazing! thank you for making my understanding of webflow easier!
Thanks 😘it's working bro thank you.....
Really looking forward to trying this technique! Thanks so much
mega mega !!! thanks danke😉
Awesome Video, Ran!
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.
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?
The blend mode is set to exclusion.
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
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😊👍
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
Love it, thanks Ran!
Great vid
Very helpful create some more like these🔥🎁🖤
Amanzing! Thanks
thankyou for ur tutorial!
Wow, nice🙌🙌🌟
What’s your view on editor x now or should I just continue learning webflow?
In phone text are going outside the screen when the ending keyframe comes.
Very nice 👌
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)
I'm following almost step by step but cant seem to get the heading to animate. Any clue what might be the issue?
the text appears a bit pixelated, anyone knows what to do ?
hey, when are your courses becoming available again?
Really helpful. I miss the Mobile version, as most of the times, users are using theirs mobile.
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.
Is your problem solved? It has been 2 years since you texted it.
@@Svetlana-hk3mm I gave up on this and webflow
Hey Ran, loved the video! How do you stay updated with what's going on in the design community?
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?
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
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
nice! will you continue to the next video to finish the rest?
Спасибо )
Please fix the link in the 'Learn how to build custom websites with Webflow FAST:' section.
make more such videos of webflow animations
Hey Ran, can you do the same thing with Editor X?
The text scaling yes, but not the scroll animation atm. Scroll animations are coming soon
can u try recreating daniel spatzkek s transition into the about page
Did you host your projects on Webflow's Hosting Plan?
Yay!
There's an opacity setting not discussed.
the animation is not working good in phone, landscape, and tablet