Scroll Trigger Video<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/ScrollTrigger.min.js\"><\/script>\n <style>\n body {\n height: 200vh; \/* Make the body taller to enable scrolling *\/\n margin: 0;\n }\n .elementor-video {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%; \/* Adjust as needed *\/\n max-width: 800px; \/* Adjust as needed *\/\n }\n <\/style>\n<\/head>\n<body>\n\n <video class=\"elementor-video\" muted>\n <source src=\"your-video-file.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n\n <script>\n const video = document.querySelector('.elementor-video');\n\n gsap.registerPlugin(ScrollTrigger);\n\n const totalHeight = document.body.scrollHeight - window.innerHeight;\n\n ScrollTrigger.create({\n trigger: document.body,\n start: \"top top\",\n end: \"bottom bottom\",\n onUpdate: self => {\n const progress = self.progress.toFixed(3);\n video.currentTime = progress * video.duration;\n if (self.isActive) {\n if (video.paused) {\n video.play();\n }\n } else {\n video.pause();\n }\n }\n });\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>https:\/\/reneroy.ca\/snippets2\/wp-content\/uploads\/2024\/11\/67394-522639883_small.mp4 Scroll Trigger Video Your browser does not support the video tag.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_angie_page":false,"footnotes":""},"class_list":["post-2595","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/comments?post=2595"}],"version-history":[{"count":62,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2664,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595\/revisions\/2664"}],"wp:attachment":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/media?parent=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n Scroll Trigger Video<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.5\/ScrollTrigger.min.js\"><\/script>\n <style>\n body {\n height: 200vh; \/* Make the body taller to enable scrolling *\/\n margin: 0;\n }\n .elementor-video {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80%; \/* Adjust as needed *\/\n max-width: 800px; \/* Adjust as needed *\/\n }\n <\/style>\n<\/head>\n<body>\n\n <video class=\"elementor-video\" muted>\n <source src=\"your-video-file.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n\n <script>\n const video = document.querySelector('.elementor-video');\n\n gsap.registerPlugin(ScrollTrigger);\n\n const totalHeight = document.body.scrollHeight - window.innerHeight;\n\n ScrollTrigger.create({\n trigger: document.body,\n start: \"top top\",\n end: \"bottom bottom\",\n onUpdate: self => {\n const progress = self.progress.toFixed(3);\n video.currentTime = progress * video.duration;\n if (self.isActive) {\n if (video.paused) {\n video.play();\n }\n } else {\n video.pause();\n }\n }\n });\n <\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>https:\/\/reneroy.ca\/snippets2\/wp-content\/uploads\/2024\/11\/67394-522639883_small.mp4 Scroll Trigger Video Your browser does not support the video tag.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"_angie_page":false,"footnotes":""},"class_list":["post-2595","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/comments?post=2595"}],"version-history":[{"count":62,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595\/revisions"}],"predecessor-version":[{"id":2664,"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/pages\/2595\/revisions\/2664"}],"wp:attachment":[{"href":"https:\/\/reneroy.ca\/snippets2\/wp-json\/wp\/v2\/media?parent=2595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}