GSAP ScrollTrigger + Elementor: The Ultimate Guide

Checkout Breakdance (aff): 👉🏼 https://breakdance.com/ref/605/?campaign=qLyXC_qYies Get this Elementor section: https://wplearninglab.com/play-video-on-scroll-elementor-section-gsap/ This is the last video you will need on to watch about "play video on scroll". Using the GSAP scrolltrigger with Elementor is super easy. It's copy-paste. BUT to get it right you have to find the proper videos to play on scroll and you have to do a little work on the video before you upload it to your site. I'll walk you through the free tools I use including FFMPEG to render the video just right and HANDBRAKE to compress it without losing any quality. #elementor #wordpresselementor This video is NOT sponsored. Some product links are affiliate links which means if you buy something we'll receive a small commission. Always backup your site just in case (or use a staging site), here's how: https://www.youtube.com/watch?v=Dl9G9b6ztto&list=PLlgSvQqMfii7DBqNndpiioUsJzyDOXADk ========================================== PRODUCTS AND GEAR MENTIONED IN THIS VIDEO ========================================== Checkout Breakdance (aff): 👉🏼 https://breakdance.com/ref/605/?campaign=qLyXC_qYies Elementor Pro: 👉🏼 https://wplearninglab.com/recommends/elementor Get this Elementor section: 👉🏼 https://wplearninglab.com/play-video-on-scroll-elementor-section-gsap/ ==================== MY WORDPRESS TOOLS ==================== Elementor Pro: 👉🏼 https://wplearninglab.com/recommends/elementor Crocoblock: 👉🏼 https://crocoblock.com/?ref=72&campaign=yt_description NitroPack: 👉🏼 https://nitropack.io/page/features/#7UDUQN Siteground (best starter hosting for WordPress): 👉🏼 https://www.siteground.com/go/dx1g30blke ================================================ ✨GRAB YOUR PRICELESS WORDPRESS CHECKLISTS FREE ================================================ WPLL Launch Checklist: https://wplearninglab.com/get/wordpress-redirects.php?utm_source=youtube&utm_medium=video&utm_campaign=wp_jumpstart&utm_id=17_point_wp_launch_checklist&utm_term=s7CiLYPYxq8&utm_content=video_description WPLL Security Checklist: https://wplearninglab.com/get/wordpress-redirects.php?utm_source=youtube&utm_medium=video&utm_campaign=wp_security_lockdown&utm_id=11_point_wp_security_checklist&utm_term=s7CiLYPYxq8&utm_content=video_description The 5 Email Sequences Every Business MUST Have PDF: https://wplearninglab.com/get/wordpress-redirects.php?utm_source=youtube&utm_medium=video&utm_campaign=online_marketing&utm_id=5_email_sequences_manuscript&utm_term=scE9z7T19hs&utm_content=video_description ========================================== PRODUCTS AND TOOLS I USE IN MY HOME STUDIO ========================================== Insta360 Link: 🎥 https://amzn.to/4dtjczK Logi LG Webcam: 🎥 https://amzn.to/3yQankj iMac: 🖥️ https://amzn.to/4dM7EXU Yeti Mic: 🎙️ https://amzn.to/3YOV8TA Neewer Ring Light: 💡https://amzn.to/3X65Fbu LED Flood Light: 💡https://amzn.to/4dor5q1 Newer Softbox Lights: 💡https://amzn.to/3M9Htij Prompter: 🎬 https://amzn.to/4dKYuet Autonomous AI desk: 🖥️ https://amzn.to/3AvO308 ================ ⏰ TIME CODES ⏰ 00:00 - Demonstration 01:42 - Works on mobile 02:41 - Skip the work, download this section 04:42 - Onscroll video setup and settings 08:36 - Making the website scroll over top of the video 10:46 - How to process videos for optimal results 11:40 - Video encoding requirements 11:59 - Converting video to MP4 and 30 FPS 13:03 - FFMPEG encoding script 14:09 - Use Handbrake to optimize video size 15:58 - Replacing videos for the onscroll effect 16:34 - Troubleshooting video problems ================= CONNECT WITH ME! ================= IG 💬: https://www.instagram.com/wplearninglab FB💬: https://www.facebook.com/groups/wplearninglab TikTok💬: https://www.tiktok.com/@wplearninglab X:💬: https://x.com/wplearninglab ======================================== #wplearninglab #wpllcommunity #wordpresstips Disclaimer: Please see the link for our disclaimer policy for all of our videos on the WPLearningLab YouTube channel: https://wplearninglab.com/disclaimer/