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.
2 ปีที่แล้ว +2
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.
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
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 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
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.
![[TH] 2024 PMSL SEA Finals D1 | Fall | ยิงต้องโหด ให้เหมือนโกรธกันมาก่อน](http://i.ytimg.com/vi/OnTdfGySmds/mqdefault.jpg)
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.
It is always nice to hear these words : "without writing any code!!", it sounds like forget you and the years you spent learning!!
To add space below the H1 you could also change the H1 Settings to be: Size = 10.8VW and Height = 110%
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.
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.
Love your content. Really usefull to quickly play and learn.
Thanks 😘it's working bro thank you.....
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 🥳
Cool! I love it 🤩 you should do more videos like this!
Love this effect. Thanks for the easy-to-understand breakdown.
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.
mega mega !!! thanks danke😉
Really looking forward to trying this technique! Thanks so much
you are really amazing! thank you for making my understanding of webflow easier!
Thanks. Great Tutorial!
Very helpful create some more like these🔥🎁🖤
Amanzing! Thanks
Wow, nice🙌🙌🌟
Really helpful. I miss the Mobile version, as most of the times, users are using theirs mobile.
thankyou for ur tutorial!
Love it, thanks Ran!
Awesome Video, Ran!
Great vid
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
Hey Ran, loved the video! How do you stay updated with what's going on in the design community?
Very nice 👌
What’s your view on editor x now or should I just continue learning webflow?
Спасибо )
Yay!
hey, when are your courses becoming available again?
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
In phone text are going outside the screen when the ending keyframe comes.
make more such videos of webflow animations
nice! will you continue to the next video to finish the rest?
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
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)
the text appears a bit pixelated, anyone knows what to do ?
Did you host your projects on Webflow's Hosting Plan?
can u try recreating daniel spatzkek s transition into the about page
I'm following almost step by step but cant seem to get the heading to animate. Any clue what might be the issue?
Please fix the link in the 'Learn how to build custom websites with Webflow FAST:' section.
Where can I buy that water bottle?
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
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
There's an opacity setting not discussed.
the animation is not working good in phone, landscape, and tablet