As I always believed it's impossibe to do really amazing websites in elementor without any code. Still I'm beginning to learn it's a very time saving tool :)
Great job, thank you for the watermelon stock video. I used it and re-implemented this scrolltrigger feature using pure JavaScript code and also posted instructions on my channel. Thank you once again. 😄
I’m an aspiring web developer with a deep interest in frontend design. I’ve been following your channel for some time now, and your tutorials have been incredibly inspiring and informative for me. I'm eager to improve my skills in web design and was wondering if you might have any advice or resources you could recommend. I would be extremely grateful for any guidance you can offer, whether it’s on techniques, best practices, or anything else that could help me grow in this field. Thank you so much for all the value you provide through your content. I look forward to possibly learning more from you.
This is awesome. So helpful. I'm learning a ton and just revamping my website and you're making it look way professional. I noticed I must of missed a step. When I turn it to iphone mode theres still a big space between the video and content underneath. What am I missing? Thank you in advance.
To all the frustrated people that found the video still very choppy on Chrome and Firefox, but not on Safari (even after the suggested re-compression of the video here): The only solution to avoid this is to export the MP4 with keyframe distance=1 (every frame is a full frame). The resulting video will be bigger in size, but the scrolling will be smooth everywhere. Hope this is helpful to somebody. cheers!
@@youruniquewebsite I can tell you how to do it in Adobe After Effects: 1- after you finished your edit, click CONTROL + CMD + M to open the render queue. 2- Under OUTPUT MODULE, select the H264 - Match Render Settings - 5 Mbps, then click on it to open the Output Module Settings window. 3- Click on Format Options and check the option Key Frame Distance. Change the number to 1. Click OK and then export.
This works on desktop (bit choppy though, used your video), but not on mobile. The video scrubbing works but there is a lot of scrolling space under the video. It's a nice and easy way but It's too laggy imo. Best way to do this with a spritesheet. That's how Apple does it.
Amazing video, appreciated it a lot. Btw what theme are you using? Hello theme with header and footer plugin? Thanks again for the super helpful video.
@@mnnogroup You can find it Here: screenstudio.lemonsqueezy.com?aff=2pmgR The software automatically zooms in and out when I click on something. Really cool!
Hey Nicolai thanks for the great content, I just bookmarked it ! I'm curious : what video (editing) software do you use ? Thanks for your reply in advance ! +1 sub 😉
Thanks, Loris You can get my screen recorder here: screenstudio.lemonsqueezy.com?aff=2pmgR It automatically zooms in and out when you click on something. Really handy!
Great tutorial, Nicolai! I love the effect and how you explained it step-by-step. I'm having a bit of trouble getting the video to play smoothly, though. It seems to lag quite a bit on my site. I followed your instructions and even used the online converter to ensure the video is 30fps. Any other tips for troubleshooting this? Thanks again for the awesome content!
Thanks! You can find The screen recorder here: screenstudio.lemonsqueezy.com?aff=2pmgR It automatically zooms in and out when you click on something. Really handy!
Great stuff! Just found your channel! Its awesome! One question. At 2:40 you are setting 500vh. Are you setting this to the header container? Or to the main container holding the video? Thanks
Update for those using Elementor Free: After releasing this video, I realized that the "sticky" effect in motion effects is not part of the free version of Elementor. I missed that, sorry! Since this video has gained so much attention, I will MAYBE try to create a new updated version for those of you who don't have Elementor Pro.😎 But only if is possible of course.
to make sticky with gsap, without elementor pro you can the pin option, point ScrollTrigger to a ID or Class of the video, remove 500vh of extra space, the pin option add the neccessary extra space automatically
Hi Nicolai, very cool and thanks i will use it but you forgot to show the header after the red parter it goes white and after that Home and About us and so on are than invisible 🙂
Love this video. I have been looking for a way to do this on WordPress. A question though, would this work iif the video was loaded elsewhere? i try to keep video files away from my server because of speed.
Great content! just trying to implement this myself but I have a container above the video section that I want to use, how do I offset that so the video doesn't start playing until it gets to the section with the video panel in?
Nice content, good job!!! One Questoon: Is there any way to optimize the scroll if the video is let's say 30 seconds or 35, when the video is longer the scroll is too fast?
Hi Nicolai, Your tutorials are very useful. Thank you so much for sharing such a helpful tutorials. I have a question. I wanted to combine two things to design a home page. Using this tutorial as a hero section and using "REVEAL CONTENT ON SCROLL - GSAP Elementor Scrolltrigger" for the rest of the page. But both are not work combinedly. Is there any way to combine these both?
For me, I used the watermelon stock video and re-implemented this scrolltrigger feature using pure JavaScript code, no library. And it works on mobile. I also posted instructions on my channel. You can check it.
Update for those using Elementor Free: After releasing this video, I realized that the "sticky" effect in motion effects is not part of the free version of Elementor. I missed that, sorry! Since this video has gained so much attention, I’ll maybe try to create a new updated version for those of you who don't have Elementor Pro.😎
Hey Nicolai, We think this solution is really ingenious. Is there also such a solution for Joomla? We would be very interested in it. We look forward to your answer
Thank you it's very helpful, i hope you read this but i found some problems, it creates every video on the page as the same class so it affects every video in it. how do you solve this issue? thank you
Yes of course we can. For me, I used the watermelon stock video and re-implemented this scrolltrigger feature using pure JavaScript code, no library. The responsive feature is easy.
![SPIN CAROUSEL ON SCROLL - GSAP ScrollTrigger Elementor [No plugin]](http://i.ytimg.com/vi/nRB49gj6sVA/mqdefault.jpg)
If you want to import this Elementor project: th-cam.com/video/Bx4fyA0fUcc/w-d-xo.html
No joke you are a legend this videos are just missing on youtube and this is the future of web development. Thank you 🙏🏼❤
@@nadav12617 I appreciate comments like this - thank you!🩵
@@nicopalmkvist bro, you are really great
I wasn't looking for this video. But I am certainly not complaining.
And I will thank you for it. I will surely use this on my next project.
NIce! I've been using a plugin this whole time that uses photos instead of just the straight up video, This is so much better! Thank you!
Pleased to assist you in finding a free and simpler solution :)
As I always believed it's impossibe to do really amazing websites in elementor without any code. Still I'm beginning to learn it's a very time saving tool :)
I forgot to say huge thanks to Nicolai for this and all the other GSAP tutorials on his channel. Keep up the great work. I like and follow
Great job, thank you for the watermelon stock video. I used it and re-implemented this scrolltrigger feature using pure JavaScript code and also posted instructions on my channel. Thank you once again. 😄
Oh nice bro, thanks for sharing bro 💪
@@dennisdo623 Yeah you're welcome bro 😅
I’m an aspiring web developer with a deep interest in frontend design. I’ve been following your channel for some time now, and your tutorials have been incredibly inspiring and informative for me. I'm eager to improve my skills in web design and was wondering if you might have any advice or resources you could recommend. I would be extremely grateful for any guidance you can offer, whether it’s on techniques, best practices, or anything else that could help me grow in this field. Thank you so much for all the value you provide through your content. I look forward to possibly learning more from you.
Wow great work here!
Please continue doing videos like this with GSAP and Elementor
Your wish is my command 😇
@@nicopalmkvist which software you are using here?
or anyone else.
@@samarpitasaha6336 link in the button of the description
Wow, just stumbled on this video. This is by far the easiest way to create beautiful scroll triggers with elementor. You just got a new sub 🔥🔥
I appreciate it, jesubayoshola 😎
I cannot say enough how much your videos have helped me to make my webpage, you are a LEGEND!
amaizing content, dont stop with this videos and animations
This is awesome. So helpful. I'm learning a ton and just revamping my website and you're making it look way professional. I noticed I must of missed a step. When I turn it to iphone mode theres still a big space between the video and content underneath. What am I missing? Thank you in advance.
May the Lord bless this man richly for the rest of his life.
To all the frustrated people that found the video still very choppy on Chrome and Firefox, but not on Safari (even after the suggested re-compression of the video here): The only solution to avoid this is to export the MP4 with keyframe distance=1 (every frame is a full frame). The resulting video will be bigger in size, but the scrolling will be smooth everywhere. Hope this is helpful to somebody. cheers!
How you change that ?
@@youruniquewebsite I can tell you how to do it in Adobe After Effects:
1- after you finished your edit, click CONTROL + CMD + M to open the render queue.
2- Under OUTPUT MODULE, select the H264 - Match Render Settings - 5 Mbps, then click on it to open the Output Module Settings window.
3- Click on Format Options and check the option Key Frame Distance. Change the number to 1. Click OK and then export.
This works on desktop (bit choppy though, used your video), but not on mobile.
The video scrubbing works but there is a lot of scrolling space under the video.
It's a nice and easy way but It's too laggy imo. Best way to do this with a spritesheet. That's how Apple does it.
I like this idea. Is there any tutorial available somewhere?
@@pateatartiner120 ChatGPT fixed my issue on mobile
Your channel’s content is lit! Every design is next-level awesome!
🥰@poppydoo-i5n
From Brazil here... God Job!
awesome, now we are talking 😁 you should have tell us of how many sec of video to take
Thanks, mate! Go for 8 sec - thats what I did 👨🏭
@@nicopalmkvist thanks mate 😃
Wow, very stunning effect. Looking forward to apply this effect in one of my projects.
Feel free to share a link if you use it in some of your projects. We would love to see that!
Oxm man, we want more videos on it. To make the website cooler please provide a animation tutorial with Elementor.❤
Top quality content, I really liked the design. You keep it fresh and innovative webdesign. Thank you for sharing
I appreciate comments like this! Thanks @eekeek433
Great video..well explained. I was just looking a solution like this without having to buy another plugin!
Subscribed. Expecting more elementor+gsap in the future 🤘
Wow, that's super cool! I appreciate your effort in making this video and providing the link to the file to play with.
This video is a gem. Thanks Nicolai ❤
@@buildwithsohanur Thanks, Sohanur 🩵
I subscribed to your channel after the first 3 seconds. DAMNNNN this content is on fire. Thank you for this, Nicolia.
Amazing video, appreciated it a lot. Btw what theme are you using? Hello theme with header and footer plugin? Thanks again for the super helpful video.
Thanks, Daniel. I use Astra theme 💪
Cool! I loved the content, one question, which screen recorder do you use? Very cool.
@@mnnogroup
You can find it Here:
screenstudio.lemonsqueezy.com?aff=2pmgR
The software automatically zooms in and out when I click on something. Really cool!
Very nice! Keep up the good work!
that truck example was funny 😆😆
I should have used that website as a lead example instead of the watermelon website 😂 Jean-Claude Van Damme is the man!
@@nicopalmkvist 😀😀
i was looking for a simple method like this for month! Thank you so much!
Love the length. Thank you for short video
Bro is a LEGEND! Subscribed!
Hey Nicolai thanks for the great content, I just bookmarked it !
I'm curious : what video (editing) software do you use ?
Thanks for your reply in advance !
+1 sub 😉
Thanks, Loris
You can get my screen recorder here:
screenstudio.lemonsqueezy.com?aff=2pmgR
It automatically zooms in and out when you click on something. Really handy!
@@nicopalmkvist thanks for the reply unfortunately I'm not on mac ^^
Have a nice day !
Great tutorial, Nicolai! I love the effect and how you explained it step-by-step. I'm having a bit of trouble getting the video to play smoothly, though. It seems to lag quite a bit on my site. I followed your instructions and even used the online converter to ensure the video is 30fps. Any other tips for troubleshooting this? Thanks again for the awesome content!
Great video! Thank you so much!
Great video! Would love to see you doing this magic on webflow as well❤
Your videos are fantastic! Could you guide how I can add unique text content for every scroll in this?
just subscribed because of this tutorial!
Thank you so so much! Now I can create a blender video and insert it!!! No need for 3JS :)
Great video, congratulations on the explanation, but unfortunately, you need Elementor Pro to use the motion effects.
Very good video!
Amazing tutorial! Thank you for sharing!
Great work!!! But I do have one question, is it possible to adjust the video height in mobile version? too many blank space and the video kinda small
Wanna know that too!
@@carolinedoliveira3688 ChatGPT will fix it just describe your issue I did it works fine now on mobile
Great valuable content once again thanks
@Mcribs1235 thanks man
Thank you so much for this, I’m really happy about this. Love it, will test it out
@@CaterStudios Thank you, mate 💪
First of all thank you for your amazing tutorial 😍😍
and second may i ask what is your screen recorder?
Thanks!
You can find The screen recorder here:
screenstudio.lemonsqueezy.com?aff=2pmgR
It automatically zooms in and out when you click on something. Really handy!
@@nicopalmkvist Yeah 😍 Thanks
Nice video! Also I have a question, do u use any software to record mouse movements? They look really smooth!
Thank you! - I use this screen recorder software: lifeonablock.com/screencast
@@nicopalmkvist Thank you!
Great Elementor tip!
Very Good Work Boy!!! 💪
@onnoideas thanks 💪
Great stuff! Just found your channel! Its awesome! One question. At 2:40 you are setting 500vh. Are you setting this to the header container? Or to the main container holding the video? Thanks
Update for those using Elementor Free:
After releasing this video, I realized that the "sticky" effect in motion effects is not part of the free version of Elementor. I missed that, sorry!
Since this video has gained so much attention, I will MAYBE try to create a new updated version for those of you who don't have Elementor Pro.😎 But only if is possible of course.
Hello Nico, thanks for the usefull info, is there any possibility to stop the video to scrolling down all the entire page?
to make sticky with gsap, without elementor pro you can the pin option, point ScrollTrigger to a ID or Class of the video, remove 500vh of extra space, the pin option add the neccessary extra space automatically
Hi Nicolai, very cool and thanks i will use it but you forgot to show the header after the red parter it goes white and after that Home and About us and so on are than invisible 🙂
This video is helpful for me, thank you very much!
@baole-l9y Thanks! More content on the way :)
yoo Nicolai, thanks a lot brother
I’m glad you enjoyed it, blackstuffguy ;) !
I don't wanna hurt him 😂 0:23
This is awesome! Thank you so much for the tutorial!!
you looks like tom cruise, by the way good video
Amazing ❤ thanks bro
@rossinidesigner1 💪💪
Thanks for sharing, this is great
amazing video thanks for sharing!!
I'm glad you enjoyed the video! Thanks for watching!
You deserve my like and subscription!
Thanks a ton! New video will be released tomorrow at 10:00 AM. ;)
Bro can you pls make tutorials of these cool elements using Vs Code please .. Btw amazing work❤
Nice, I implemented it into a static site.
U just got a subscriber 😁
great video ! i dont know why, i've done everything like you, but it is not sticky, but i activate "stick-top"
That's amazing! But why is the animation choppy on the mobile version?
Great video!!! What about tablets and mobile? Is there something we can do to fit this design?
Just scrolling scrolling yuotube and fotunately found a Gem
Thanks, mate - New ScrollTrigger video will be released tomorrow at 10:00 AM. ;)
Love this video. I have been looking for a way to do this on WordPress. A question though, would this work iif the video was loaded elsewhere? i try to keep video files away from my server because of speed.
amazing, ive been looking for a solution like this :D
very informative you gained a new subcriber 👏👏🎊🎊please upload a detail video step by step on elementor tutorial
Thanks @sportPulse! One of my next videos will be a Elementor course 🔜💪
@@nicopalmkvist perfect 👏👏🎊🎊
great video
So awesome, thanks bro! 🎉
@thewebstylist More like this on the way 🔜
Curious does this work on mobile view?
Great content! just trying to implement this myself but I have a container above the video section that I want to use, how do I offset that so the video doesn't start playing until it gets to the section with the video panel in?
Nice content, good job!!! One Questoon: Is there any way to optimize the scroll if the video is let's say 30 seconds or 35, when the video is longer the scroll is too fast?
I found it no worries, i just increased the container vh
Well done ! Thanks for that video !
What if I want the same effect, but in a different place on the page?
Thanks, great and clean guideline video. really usefull
Hi Nicolai, Your tutorials are very useful. Thank you so much for sharing such a helpful tutorials.
I have a question. I wanted to combine two things to design a home page. Using this tutorial as a hero section and using "REVEAL CONTENT ON SCROLL - GSAP Elementor Scrolltrigger" for the rest of the page. But both are not work combinedly. Is there any way to combine these both?
Amazing and simple
Niiiice man! More vids pleasse ;)
New ScrollTrigger video will be released tomorrow at 10:00 AM. ;)
Great work, What about the mobile version. Its not working properly for me. Any suggestion?
did you find a solution?
For me, I used the watermelon stock video and re-implemented this scrolltrigger feature using pure JavaScript code, no library. And it works on mobile. I also posted instructions on my channel. You can check it.
ChatGPT fixed my issue on mobile
Crazy Crazy Crazy
@praveenraj8704 💪💪
Disclaimer : u should buy elementor pro 🗿
Update for those using Elementor Free:
After releasing this video, I realized that the "sticky" effect in motion effects is not part of the free version of Elementor. I missed that, sorry!
Since this video has gained so much attention, I’ll maybe try to create a new updated version for those of you who don't have Elementor Pro.😎
@@TheBrinq You can try the Royal Elementor plugin, Sticky feature. It works for me.
@@nicopalmkvistthat would be very very helpful 💯
Bro, just google for elementor pro for free. U'll definitely fine one with updates
tip: use Pro Elements
That is sick. Does it work on mobile view?
Legend! Thank you!
"all of our food keeps blowing up 🗣️🗣️🗣️🗣️🔥🔥💥🔥💥"
Hey Nicolai,
We think this solution is really ingenious.
Is there also such a solution for Joomla?
We would be very interested in it.
We look forward to your answer
Video playing like a popup with black ground when first opening in the Mobile view, how to fix it? please help
ask ChatGPT it fixed my issue on mobile
how awesome, thank you!
Love it❤
I bought the template and added it but it adds nothing and doesn't work :(
Thank you! Great video! Easy to follow along!
thank you very much, no bullshit, full value
Thank you it's very helpful, i hope you read this but i found some problems, it creates every video on the page as the same class so it affects every video in it. how do you solve this issue? thank you
Thank you so much!!
Bro you are Awesome, 😎❤ just subbed
Hey, thanks for the sub, bro! I'm glad you're enjoying the content. 💪
Is the code responsive for mobile and tablet?
Yes of course we can. For me, I used the watermelon stock video and re-implemented this scrolltrigger feature using pure JavaScript code, no library. The responsive feature is easy.
awesome thx
@dercrazed 💪