I've done one on FLIP th-cam.com/video/kW7GPzWyXlE/w-d-xo.html but it's another awesome plugin I'd love to do more content on. Glad you liked this one!
Good eye - this actually speeds up page load :). By adding the defer attribute, the browser is able to download the scripts WHILE parsing the HTML, but does not execute them until DOMContentLoaded fires. When you put the script in the "before section" you don't give the browser a chance to download the script file until it has already completed parsing the HTML. Some decent visuals here: unused-css.com/blog/how-javascripts-async-and-defer-tags-let-you-load-pages-faster/
@@webbae Thanks for explaining this! I really enjoyed the link to the article talking about async and defer scripts. Please keep coming out with more good content!😁😁
yes you can. I'll see if I can make a video on that but in short you'll use ScrollTrigger to link it up. For now here's a code pen as an example: codepen.io/NickVanHolsbeeck/pen/jOyMNGO
![Scrollytelling with GSAP in 12 Minutes! [MotionPath, ScrollTrigger]](http://i.ytimg.com/vi/d8MbaVEF3eI/mqdefault.jpg)
![Scrollytelling with GSAP in 12 Minutes! [MotionPath, ScrollTrigger]](/img/tr.png)
Dude. You are the man!!! Always wondered how to do this and I've never found anything helpful. Thank you!
Glad you liked it 💯
Woah thanks man for the tutorial. Next Topic Flip Plugin, the most used Plugin after the scroll trigger Plugin.
I've done one on FLIP th-cam.com/video/kW7GPzWyXlE/w-d-xo.html but it's another awesome plugin I'd love to do more content on. Glad you liked this one!
Thanks for the tutorial!
I noticed you placed the embeds in the head tag, won't that slow the site down compared to inserting them in the body?
Good eye - this actually speeds up page load :). By adding the defer attribute, the browser is able to download the scripts WHILE parsing the HTML, but does not execute them until DOMContentLoaded fires. When you put the script in the "before section" you don't give the browser a chance to download the script file until it has already completed parsing the HTML. Some decent visuals here: unused-css.com/blog/how-javascripts-async-and-defer-tags-let-you-load-pages-faster/
Hope that helps and great question - I always wonder if that will trip people up as we are so used to putting scripts in the body section!
Also note it's only for scripts with a src attribute. As such you have to be careful about how you load scripts!
@@webbae Thanks for explaining this! I really enjoyed the link to the article talking about async and defer scripts.
Please keep coming out with more good content!😁😁
Always wanted to know how to do this!
got chu bro
Awesome! Keep up the great work !
Thanks Matt will do!
can you make this a scroll interaction? and is so how would you apply the code?
yes you can. I'll see if I can make a video on that but in short you'll use ScrollTrigger to link it up. For now here's a code pen as an example: codepen.io/NickVanHolsbeeck/pen/jOyMNGO
@@webbae your the man thanks mate
@@juice7371 Got the Juice
Awesome tutorial, thanks man!
👌
Strava needs this!!! Go sell it to them #stravapartner
THEY LIKED THE TWEET