Super SMOOTH Hero Section Scrolling Effect with Elementor PRO Motion Effects | TemplateMonster

[@bottablue92]

Hi! for the people out there that cant use the transparency or blur in fade out mode, you have to set the viewport range 20 bottom and 35 top at least that work for me.. by the way amazing effect!!.. thanks a lot!!

[@arunace]

thanx a lot for this comment, really helped me :)

[@shamshrama5982]

Thank You! it helped a lot

[@R1znl3r]

If you header's position is not fixed, you might have made a mistake when applying the scrolling effects on 3:51 ; instead of Advanced > Scrolling effects, you should use Styles > Scrolling effects.

[@TottoHolm]

Thank you. Saved me a lot of headache. If I only could follow a tutorial properly, right? 😆 Good tutorial from uploader and thank you again, @Ken Lee!

[@ares2339]

Awesome! We all want to see more of you rebuilding awesome effects in Elementor :D So inspiring!

[@templatemonster]

More is coming!

[@Sixxiron]

Super cool!!!

[@mahnoosh59]

Hello, thank you for your good tutorials I encountered a problem in the scale section, so that when I scale, the next sections move to the right when scrolling the page. Where do you think the problem comes from?!

[@pranzetti]

Thank you!

[@carlibg]

very very nice.. i am starting in the website word and you, you really inspire me. thank you! 🙏

[@templatemonster]

Best of luck with all your beginnings!

[@carlibg]

@@templatemonster 🤗

[@keatlow]

appreciate for your video! its awesome! however any tutorial for making the text section becomes super smooth on scrolling? Or "Animate On Scroll" on text by using elementor ? TQ

[@topproductreviewshwf]

Really enjoy this effect! Thanks for the turorial.

[@templatemonster]

Thanks for your feedback, Hunter!

[@ffllowow6341]

It's really cool. Could it be implemented on mobile? I want the background image to be fixed on mobile.

[@lucianclaudiustefan9829]

Amazing

[@gonebymidnight2881]

Amazing thanks a lot

[@templatemonster]

Most welcome 😊

[@JoeGator23]

Do you have a tut for creating this split header with the logo in the centre? Very nice! And thank you for this tutorial... professional quality, nicely done presentation of useful content. Cheers!

[@JoeGator23]

Just curious to see if you read your comments?

[@gonebymidnight2881]

my slider does not fade out regardless of transparency level unless I set the viewport range to 12-18?

[@janswier3384]

Something to keep in mind is to give your next section background an image or a colour if you also use a heading, otherwise the heading will overlap all other sections (also think of your footer).

[@NDK0]

Looks great, but doesn't work. The section can't fade (background will not be affected by the scrolling effects)

[@BryanPhilips]

Amazing! Quick question. Do double headings (desktop/mobile) cause any SEO issues - double H1?

[@shyamkheni8459]

Great Tutorial, Really a great value!

[@ajax8993]

Nice. But how it passes the Speed test on Google? All special features/effects on the website may cost a high price / bring down the speed page performance.

[@alexg4626]

Hello, thank you for the tutorial, but no matter how hard I tried, it is impossible to set the viewport to the same% as you. Because with the still image in the background it does not work, yet at home it works. In the elementor doc it is said that it does not work with fixed elements. So how do you do it? Thank you

[@AskAWalker]

Can you please create a Playlist for every elementor video? Great job. I'm a novice and I was able to follow along.

[@templatemonster]

Luckily, we do have a playist with our Elementor Tuts. Please see it here kzbin.info/aero/PLhQIfRNfwAocyTGz7V5gRluWPj47-a5Wc Good luck!

[@vand888]

great effect but sadly I don't know what happen with my scroll effect after I chose scale up or fade out on transparency and blur it doesn't work T_T

[@brobocops]

Excellent tutorial, I've never seen the transparent header done this way before, you can also give the column the header resides in a background color then adjust the opacity on scroll to achieve the same effect, starting with 0% opacity at the top and fading to black as necessary.

[@adityaarsharmapersonal]

You are the best thing to happen to mankind just loved this❤️❤️

[@jaroudimedia]

There is something wrong for some reason scrolling effect not working for the image even when increasing Level. Any particular reason that can prevent this from working. I have tried it on 3 websites.

[@liamdoran2257]

Hi, I'm following your guide but I'd like to then blend into a ken burns image. So i have the main hero, random section then the ken burns. I cant seem to seemingly blend into the ken burns, like with the first section you added a black colour - it doesn't seem to work with the bottom section.

[@dariuswillow9964]

This is not working anymore when applying scale effect, i t breaks the parallax effect. Maybe an update of elementor is casing the issue.

[@ClassyDevs]

Good video

[@templatemonster]

Glad you enjoyed!

[@flatspaces3876]

I did not get the same effect with the scrolling options. Not even close. Has there been a chance since when this video was made? I have duplicated the steps exactly and cannot get blur, transparent and scale to work like in the video.

[@alexanderwruss]

Great tutorial ! Thank you 🙌🏻

[@templatemonster]

Glad it was helpful!

[@adied7725]

Hi great video thanks, do you have a link to the other video please? Also do you have the css used? Please Thanks 😊

[@danielmanrom]

Thanks for the tutorial, what theme are you using?

[@templatemonster]

ahah, actually, it wasn't a theme, but a quick demo I put together fot the tutorial based on the design of this website www.webfotografie.be/nl/home

[@binyamindadoun6007]

Thank you for the video! :) I have a couple of questions please: 1- Why are you saying that in mobile the header shouldn't be sticky? 2- How do you do the HEADING to be fixed like the image background? Do I select "fix positioning" in heading the advanced tab? (if I do so, it works on desktop well, but then on the mobile, IT WORKS TOO but only for that heading but the fixed background image doesn't work on mobile... I appreciate you taking the time :)

[@MusicConnorThomas]

How did you do the menu that’s split in the middle by the logo?

[@TottoHolm]

I had an issue with the title in the hero section that it followed all the way down to the footer. Edited footer section's z-index to fix it, but couldn't figure out another (smarter and easier) way of doing it.

[@estudiomrz]

AMAZING! THANK YOU VERY VERY VERY MUCH

[@hamzayaseen1570]

Genius

[@flatspaces3876]

I find that the scrolling effects only works on pics...not backgrounds. How did you get it to work on the background????

[@tomsmith7960]

I really love this effect and I am trying to implement it. I have followed it step by step but when I get to scrolling effects noting seems to work, I don't get the transparency or blur effect when selecting fade out, but I do on the other options fade in, etc. Please help!

[@Snidolf]

I have the same problem... help!

[@flatspaces3876]

@@Snidolf me too.

[@andreabovolenta1226]

me too

[@curiouscheck4284]

Thank you! How can you do that same effect on the header, but with a video in the background instead of image?

[@templatemonster]

If you could apply motion effects to the section background video - then yes, this would work

[@theredmaster_superbee]

Please ... can you help me with something I need? ... is it possible to use a plugin for elementor that activates a sound when using the browser scroll? Some trigger that when displaying the viewport a sound is activated ... if you can with fade out or fade in ... I don't know how to do it and I would like a plugin type to place it easier ... thanks for your valuable help.

[@ALESSTIG]

WOW EFFECTS

[@tomley-greaves1529]

Hi, when I scroll my page title goes over the top of the next section, not below it. Any idea how to fix this?

[@bigsmoke4568]

When I enable scrolling effects, the fixed position of the image goes back to Default and stops working, any advice?

[@t.t.3627]

same here

[@t.t.3627]

did you found a fix?

[@Onyeakak]

Seems to be a Chrome issue. Please let me know if you have figured it out.

[@maxencedesjardins8416]

HI! I have done exactly what you did but none of the motion effects work for me. Any idea what could it be ?

[@raulrpgz]

this doesn't work if using a slideshow background in elementor pro - correct? or have I done something wrong? lol. great effect!

[@templatemonster]

Thanks! Haven't tried it with the slideshow yet, but I doubt the process would be different from the one shown in the vid. But yeah, the result might be different, and motion effects might not work with the slideshow. Just make sure you follow the instructions and if it doesn't work, then, well... What can we do? :))

[@alessandroaggio]

crazy good

[@JasonBarnette]

Seems like it has been awhile since this video was made and anyone left a comment. I just tried this - and it doesn't work. I put the video side-by-side with Elementor on my monitor, copied every single move, and it doesn't work at all. I am using Firefox 93 and I just realized I can't do blurry backgrounds in the header with this browser - I don't know if that is the same issue here.

[@bryanroshan7787]

it looks so cool on me mawbil

[@AttyKev]

Thank you for this tutorial :) All good until I noticed "Scaling" creates unwanted scrollbar on scroll. IF (this happens to you) Then: Section with scale > Layout > 'Overflow : hidden'

[@templatemonster]

Thank you very much, Kevin!

[@christianmarvinfernandez1760]

Is the scrolling effect only available in PRO?

[@ikmstrategy4271]

Thanks for this idea. Yeah I tried this as well, it didnt work for me. I'm guessing its because between watching this video and you making it, elementor updated the motion effects function and made it include everything within that section. I did find a work around though. 1. make a dummy section under the hero section with the transparent colour - set min height to 40px 2. move the heading into there - make sure you follow her settings for fixed position + 40%~45% and boom, it stay theres because its technically not in that section.

[@templatemonster]

Wow, thanks for such a creative solution! But let's see if there is an even easier fix :) The thing is, in the video I applied scrolling effects to the background image of the section in the Style Tab -> Background -> Scrolling Effects, and NOT in the Advanced Tab -> Motion Effects. This way, the scrolling effects will not affect the elements inside the section, because they only target the background image of the said section. Would be awesome if you could try applying the effects to the background image in the style tab and get back to us with the results!

[@ares2339]

saved me! thx

[@brobocops]

@@templatemonster This method unfortunately doesn't work with video though as there's no option to set it as fixed other than with an add-on.

[@ranuiaus]

Great tutorial!! I'm new to elementor, just a quick question regarding headers? Particularly your header design, how do you make it global? Or easily make it global?

[@templatemonster]

Yeah, that's easy, we even have a video on the channel where we show how to apply headers globally to your website. It was on a live stream, if I am not mistaken. But to do this, you'll need to have Elementor Pro subscription, which is a paid premium version of Elementor Page Builder.

[@vaasrah1165]

Fixed positioning is not working for me. :( Why is the word PORTFOLIO still scrolling up? Followed your tutorial step-by-step and not getting the same result.

[@spare9434]

the same for me. it makes no sense

[@issawebdesign170]

I had the same problem. But then I added a background color in the following sections and it worked for me !

[@ricr8987]

Hi, when I scroll down the text stay fixed on the page and pass over the hero section, I did exactly like you did... can you help me please? thank you

[@bottablue92]

Hi, to fix that, you have to go to advance and in z-index you have to put 0.. hope it help!

[@danielyeh1627]

*Y there's no Scrolling effects and mouse effects in my elementor?*

[@saudpardesi8598]

Could we make it horizontally instead of vertically?? I want to create sticky scrolling effect horizontally

[@templatemonster]

It's quite tricky to make it work right. Also, it might cause issues in mobile view. So if there is an option to go for a different effect, i would do so.

[@nathnaeltesfaye2332]

Which version of elementor is this? Because i cant find the motion effect tabs.

[@pantelisalexo]

For me dosen't work... the second section don't come over the Hero section...

[@rifat_newaz1998]

Thanks :*

[@scurrey8489]

My motion is jerky how are you getting it to scroll super smooth?

[@ikmstrategy4271]

depends on your scroll wheel - if you have a laptop with a touch pad, it ends up being smooth. Or if you have a logitec g502 with hyper scroll - it will also be smooth. You can also try dragging the scroll bar on the right side of the screen, that should be smooth as well.

[@scurrey8489]

@@ikmstrategy4271 I got with trying to move less a smooth scroll plugin and absolute positions on the bottom of the section the images are in. Now i just cant get the blur to work :(

[@spare9434]

plugin: MouseWheel Smooth Scroll

[@templatemonster]

Might also depend on the browser in which you are viewing your page. Make sure you are using the latest version of your browser and Elementor. To see if it's the browser that causes the issue, try opening it in a diff browser. Hope it helps!

[@spare9434]

great, BUT the header 'PORTFOLIO' doesn't stay fixed in the window, it scrolls up.... why?

[@templatemonster]

Please make sure you follow the instructions closely. Please check back if the issue persists, we'll try and figure sth out.

[@bySterling]

VERY Cool effect and Style! I really wish there was a way for fixed Elementor backgrounds to work on mobile... there’s no CSS that would allow for...? 🙏🏻📱💥💪🏻🌎

[@bySterling]

Just wanted to check back if you knew of any CSS to allow for fixed mobile view backgrounds (I can’t find an answer on Google searches) 👊🏻📱⚡️💪🏻

[@templatemonster]

​@@bySterling I'm afraid there is no answer because the Elementor team intentionally didn't enable this option for mobile view because fixed backgrounds don't perform well on mobile devices :) Sadly, we need to wait untill this is fixed on a more global level rather than inside Elementor. This will simply be better for the user experieence.

[@MsAdza85]

The website www.webfotografie.be/nl/home is well done, can the mouse effect also be done in Elementor? I mean the circle

[@lukassalewsky7641]

Wow, thats kinda complex!

[@angelosinday9133]

Not working in 2021

[@photography_tv]

I think there is a misleading information in this video.. Anything placed inside HERO section which has SCROLLING EFFECT can not stay fixed as you scroll.. When you turn off the Scrolling Effect for the Hero section then it stays where you place the title.. Otherwise it takes the scrolling effects. If you have any answer for that please share with us. Or else I will start thinking that you are misleading people with wrong information.

[@templatemonster]

thanks for the question, and thanks for bringing that up! it's a very good point, but there was no intention to put any misleading info out there. most likely, the result you're seeing is different from the one in the video is because you're applying Motion Effects in the Advanced Tab -> Motion Effects, and not in the Style Tab -> Background -> Scrolling Effects as shown in the video. The idea here was to target only the background image of the section, and NOT the section itself, so the motion effects don't affect the title :) If it's the case, could you please check if it works for you if you apply the scrolling effects to the background image only in the style tab? Please let me know what the result was! Cheers! :)

[@HungHa-cg6gm]

I don't know why but I have followed all your steps but the transparency, blur, and scale effects don't work. If I set the viewport from bottom to top, the blur & scale work but much different from your clip :( You can see via this screenshot: snipboard.io/f95iYj.jpg

[@panchorojo]

same result here i dont undestand why

[@templatemonster]

What "Effects relative to" setting do you have enabled?

[@Buus192]

@@templatemonster What should it be?

[@benedictabudu7783]

It's not working

[@templatemonster]

Maybe, you should try one more time.

[@Haykke]

50 z index, jesus christ, why not 1 2 3 4 5

[@smurfy123888]

Good video

[@leopalmaro5412]

The motion effect stop working once I add a 3rd section? I tried to make the effect relative to viewport but still doesn't work. It works fine when I have only the hero and 2nd section though. Any idea what it could be?

[@templatemonster]

Perhaps the reason is in the styles of other widgets or custom changes. The styles are either interrupted or there are errors in js files.