I love that you offer both a free option and the option to buy the template. I just bought this template and just wanted to say thanks, it worked perfectly 👏👏
@@thewebstylist Hey guys, thanks for your interest in this project. Regarding the template, it was never actually free-I just set the price to $0 in the video so you wouldn’t have to go through a boring payment process. ;) However, I do offer the entire project for free, just by watching an 8-minute video. Keep in mind that I spend 3-4 days creating, filming, editing, and so on for these projects. So, to keep doing this, there needs to be some justification in terms of income. And as @glencoe1266 mentioned, I think $3.99 is a fair deal. 😉 I hope you build the coolest website ever!❤
To reverse the animation so that it starts by filling the entire screen and then shrinks into a circle, you need to swap the values in the "fromTo" animation. Try this updated code: lifeonablock.com/reverse-image-expand/
@@nicopalmkvist Thank you for this! The animation now works in reverse but the image doesn't expand as smoothly. I tried sharing a link in my last comment but I think it got flagged.
hey! first of all great design, I was wondering why in the very first clip the circle starts to expand once it reaches the center of the page whilst at the end in the tutorial it stops at the bottom. How can you make the starting point for the effect in the center of the screen and not at the bottom? thank you 🙏
To adjust scroll speed, find my code and change the "scrub" value in scrollTrigger at line 23: To slow it down write:: scrub: 2 Make it faster: scrub: 0.5
I noticed in the devtools that the circle is not 600px by 600px (before it starts to expand), but 640 x 600px. I had to change original width in the GSAP script to 37,5em instead of 40em to make it a perfect circle.
Yes, that video is on my list, but I'm having trouble structuring it. It's hard to know which points to include. Maybe you could give me some good input? Video structure: 1. What is GSAP? 2. How do we implement GSAP in Elementor? 3. ScrollTrigger in Elementor 4. GSAP: Free or Paid? 5. Reveal Effects 6. Responsive Animations 7. Using GSAP with Elementor Widgets 8. Examples of Using GSAP in Projects
@@nicopalmkvistThis is a really good structure and covers what we need. What people struggle with is trying to emulate what webflow animations do. So you can add examples of such animations. Add a section for typography effects with GSAP
Great tutorial, thank you very much, we hope that you make on heading/or body text reveal on scroll, i definitly will buy some from your template library.
Great tutorial, thanks! I have created my own page similar to your design and structure, but I have the problem that the circle expand fires one time, and then it fires again. Can you suggest what would be the problem?
Solved it, I have misplaced the classes LOL :) meanwhile, another question... how do you control at what point in the screen the circle animation would start, I would prefer to see the whole circle like in your first example in the video and then to slowly expand? Thx
Hi Nicolai! I absolutely love your videos! Quick question: how can I place the text container inside the image without the paragraph stretching or shrinking as the image resizes? Greetings from Argentina!
I just tested the template, and everything works as it should. Do you have Elementor Pro? And the latest version? Could it be something else causing the conflict, like a caching plugin?🍀🍀
@nicopalmkvist Thank you for the video! when i scroll, the image covers the header instead of staying behind it. do you have any ideas on how i can fix this?
Very cool effect! If you want a rectangle or square instead of a circle, can you simply adjust this in the code? If so, could you tell us what needs to be adjusted? Thanks!
Hi jeffrey - To change the image to start as a square instead of a circle, you can modify the value of "borderRadius" in the initial state. So you can set borderRadius to "0px" from the beginning. like this: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ markers: false }); // Animate From To $(".stickey_circle_wrap").each(function (index) { let triggerElement = $(this); let targetElement = $(".circle"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top top", end: "bottom bottom", scrub: 1 } }); tl.fromTo(targetElement, { width: "40em", height: "30em", borderRadius: "0px" // Start as a square }, { width: "100%", height: "90vh", borderRadius: "0px", // Remain a square when expanded duration: 1 } ); });
I just watched every video that need sticky option for every feature and its only available in pro version..... So is there any option without pro that i can do in free version(is there html code ) like all video ........ Plz tell me in details
This is custom way to build this effect, Though, I feel The Plus Addons for Elementor have Scroll Sequence widget and That work nicely without custom code. Have you tried that?
A big part of my mission is to avoid adding more plugins that could slow down your site. That's why I work hard to find solutions that don't require additional plugins - like this! But thank you for your question!
ThePlus is the worse elementor plugin to use in terms of pageload and how slow it makes the whole Wordpress experience. I used to use it and had nothing but issues plus slowness. I removed it and suddenly Wordpress stopped being slow. They know it and have been forever trying to fix the bloatness of the plugin. Avoid the plus like the plague.
@@nicopalmkvist What if you use their new plugin called WDesignKit, That is having elementor widget builder and you can use your custom code to create a widget. I am asking you this because, I know many people like us, who are not good at coding and still wanted to have such animations, which We can easily edit as well without touching code.
you're gonna destroy your website adding a massive plugin for just an one feature. rather I would suggest learn some codes it'll save you a ton of headache you'll get from a slow website.
Hi Sir, I am really impressed with your videos, and I have a small request. Could you please create a video using GSAP to build a website with a scrolling effect, similar to the ones in your other tutorials? I would love to incorporate it into my portfolio website. Your efforts would be greatly appreciated, and this is a humble request. I’m a new subscriber to your channel, and while I know I may not have much significance to you, I would be so grateful if you could make this video. I will definitely give credit to your efforts. Thank you so much!
Hey wp-doctor. I really appreciate this. I’ve actually been working on creating a complete Elementor website with GSAP ScrollTrigger. I’m almost done, but it’s been a challenge because I didn’t want to use any other plugins besides Elementor and my ScrollTrigger skills, to keep the website fast and clean. I’m looking forward to showing it to everyone on my channel within the next 10 days 💪💪😅
All My Elementor Projects in 60 Seconds: ruclips.net/video/wSv4C3rEp-g/видео.html
Wow! You've done it again! Well done! This channel is one of my best Elementor resource.
Thanks, Rodlivz - I appreciate it!
I love that you offer both a free option and the option to buy the template.
I just bought this template and just wanted to say thanks, it worked perfectly 👏👏
Well he took that away, a bit misleading as shows $0 in video and is $3.99 now
@@thewebstylist Yeah i think a lot more ppl were downling the free version. Still not bad for 3.99.
@@thewebstylist Hey guys, thanks for your interest in this project. Regarding the template, it was never actually free-I just set the price to $0 in the video so you wouldn’t have to go through a boring payment process. ;)
However, I do offer the entire project for free, just by watching an 8-minute video. Keep in mind that I spend 3-4 days creating, filming, editing, and so on for these projects. So, to keep doing this, there needs to be some justification in terms of income. And as @glencoe1266 mentioned, I think $3.99 is a fair deal. 😉
I hope you build the coolest website ever!❤
Excellent explanation, there are no words, well done and thank you very much, you are a champion
Love comments like these 💪💪
Keep on innovating web design :), thank you for sharing
Is there anyway to reverse the animation where it starts full and scrolls into a circle?
To reverse the animation so that it starts by filling the entire screen and then shrinks into a circle, you need to swap the values in the "fromTo" animation. Try this updated code: lifeonablock.com/reverse-image-expand/
@@nicopalmkvist Thank you for this! The animation now works in reverse but the image doesn't expand as smoothly. I tried sharing a link in my last comment but I think it got flagged.
hey! first of all great design, I was wondering why in the very first clip the circle starts to expand once it reaches the center of the page whilst at the end in the tutorial it stops at the bottom. How can you make the starting point for the effect in the center of the screen and not at the bottom?
thank you 🙏
So awesome! Great style and that it’s also responsive 🎉📱👏🏻💯
Thanks @thewebstylist!
Woooow it's amazing 🤩🤩
So cool!
Very nice piece, I've bought it
Hi Nicolai! Incredible video, you are a maestro. Do you know how to make the scroll animation faster or decrease the scrolling time?
To adjust scroll speed, find my code and change the "scrub" value in scrollTrigger at line 23:
To slow it down write::
scrub: 2
Make it faster:
scrub: 0.5
@@nicopalmkvist tyyyy
I noticed in the devtools that the circle is not 600px by 600px (before it starts to expand), but 640 x 600px.
I had to change original width in the GSAP script to 37,5em instead of 40em to make it a perfect circle.
@@franktielemans6624 Oh great work, mate. I’ll add this to the code ❤️
great job
Great! Do you plan to make large toturial on GSAP A to Z with Elementor?
Yes, that video is on my list, but I'm having trouble structuring it. It's hard to know which points to include.
Maybe you could give me some good input?
Video structure:
1. What is GSAP?
2. How do we implement GSAP in Elementor?
3. ScrollTrigger in Elementor
4. GSAP: Free or Paid?
5. Reveal Effects
6. Responsive Animations
7. Using GSAP with Elementor Widgets
8. Examples of Using GSAP in Projects
@@nicopalmkvistThis is a really good structure and covers what we need. What people struggle with is trying to emulate what webflow animations do. So you can add examples of such animations. Add a section for typography effects with GSAP
@@nicopalmkvistwhat about creating full tutorial on awwwards websites???
Man! U the goat
NICE ONE !! :-) LIKE IT A LOTTTTT
so cool
Nice!
Great tutorial, thank you very much, we hope that you make on heading/or body text reveal on scroll, i definitly will buy some from your template library.
Hi, thanks for the video, is this suppose to work for video too? maybe it's me i can't manage but worked just for picture, tks!
Great tutorial, thanks! I have created my own page similar to your design and structure, but I have the problem that the circle expand fires one time, and then it fires again. Can you suggest what would be the problem?
Solved it, I have misplaced the classes LOL :) meanwhile, another question... how do you control at what point in the screen the circle animation would start, I would prefer to see the whole circle like in your first example in the video and then to slowly expand? Thx
Cool
Good Job so inspiring and great work... I will create some content on this in my next video😉... Greetings from Germany.
Hi Nicolai! I absolutely love your videos! Quick question: how can I place the text container inside the image without the paragraph stretching or shrinking as the image resizes? Greetings from Argentina!
I created a container in expanded container and -450 top of this container. Good luck u
hey i bought the template but the section under the image expand where the image chnages on scroll is not working :(
I just tested the template, and everything works as it should. Do you have Elementor Pro? And the latest version? Could it be something else causing the conflict, like a caching plugin?🍀🍀
@nicopalmkvist Thank you for the video! when i scroll, the image covers the header instead of staying behind it. do you have any ideas on how i can fix this?
Give the header higher z-index
Very cool effect! If you want a rectangle or square instead of a circle, can you simply adjust this in the code? If so, could you tell us what needs to be adjusted? Thanks!
Hi jeffrey - To change the image to start as a square instead of a circle, you can modify the value of "borderRadius" in the initial state. So you can set borderRadius to "0px" from the beginning. like this:
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.defaults({
markers: false
});
// Animate From To
$(".stickey_circle_wrap").each(function (index) {
let triggerElement = $(this);
let targetElement = $(".circle");
let tl = gsap.timeline({
scrollTrigger: {
trigger: triggerElement,
start: "top top",
end: "bottom bottom",
scrub: 1
}
});
tl.fromTo(targetElement, {
width: "40em",
height: "30em",
borderRadius: "0px" // Start as a square
},
{
width: "100%",
height: "90vh",
borderRadius: "0px", // Remain a square when expanded
duration: 1
}
);
});
@@nicopalmkvist Thanks a lot! 💪
@@jeffrey6283 Happy to help🥰
yoooo boii
How to link a custom coded button with elementor form? Plz make a video on that
do you also sell a full website incl header etc?
how to change the shape instead of circle?
I just watched every video that need sticky option for every feature and its only available in pro version..... So is there any option without pro that i can do in free version(is there html code ) like all video ........ Plz tell me in details
Thru elementor Royal addons plug in
continue your work even if world stops 😀 and try for three.js canvas implementation
👏👏👏👏
This is custom way to build this effect, Though, I feel The Plus Addons for Elementor have Scroll Sequence widget and That work nicely without custom code. Have you tried that?
A big part of my mission is to avoid adding more plugins that could slow down your site.
That's why I work hard to find solutions that don't require additional plugins - like this!
But thank you for your question!
ThePlus is the worse elementor plugin to use in terms of pageload and how slow it makes the whole Wordpress experience. I used to use it and had nothing but issues plus slowness. I removed it and suddenly Wordpress stopped being slow.
They know it and have been forever trying to fix the bloatness of the plugin.
Avoid the plus like the plague.
@@nicopalmkvist
What if you use their new plugin called WDesignKit, That is having elementor widget builder and you can use your custom code to create a widget.
I am asking you this because, I know many people like us, who are not good at coding and still wanted to have such animations, which We can easily edit as well without touching code.
you're gonna destroy your website adding a massive plugin for just an one feature. rather I would suggest learn some codes it'll save you a ton of headache you'll get from a slow website.
hiya, it is possible to have an image carousel using Gsap? I know people usually use swiper js but I was wondering if it were possible using gsap?
Actually, I’m working on a video about an image gallery with GSAP. It will be released later this week.
@@nicopalmkvist awesome. Thanks, Nico.
why CAN I CREATE THAT NAVBAR?
Send me an e-mail, then I’ll send you the header as a ready-to-import template for free 😇
@@nicopalmkvist i send it like week bro
@@mintz347 did not receive anything. What's your e-mail
Hi Sir,
I am really impressed with your videos, and I have a small request. Could you please create a video using GSAP to build a website with a scrolling effect, similar to the ones in your other tutorials? I would love to incorporate it into my portfolio website. Your efforts would be greatly appreciated, and this is a humble request.
I’m a new subscriber to your channel, and while I know I may not have much significance to you, I would be so grateful if you could make this video.
I will definitely give credit to your efforts.
Thank you so much!
Hey wp-doctor. I really appreciate this.
I’ve actually been working on creating a complete Elementor website with GSAP ScrollTrigger.
I’m almost done, but it’s been a challenge because I didn’t want to use any other plugins besides Elementor and my ScrollTrigger skills, to keep the website fast and clean.
I’m looking forward to showing it to everyone on my channel within the next 10 days 💪💪😅
@@nicopalmkvist thanks 🎉
Please make some tutorials with free elementor free, why only elementor pro tutorials
Next video is possible with The free version of Elementor + it’s The coolest project yet
@@nicopalmkvist looking forward for it. Thanks