GSAP Scroll Trigger
Tutorial
PRACTICE THE GSAP SCROLL TRIGGER FUNDAMENTALS BY DUPLICATING THIS WEBFLOW PROJECT AND FOLLOWING ALONG WITH THE YOUTUBE VIDEO. REMEMBER TO COPY THE SKELETON CODE BELOW AND USE codesandbox.io TO TEST THE SCROLLING.
GSAP Video Transition
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".main-video",
start: "top center",
end: "bottom center",
scrub: true,
markers: true
}
});
tl.to(".video-wrapper-1", {
y: "0",
x: "0"
});
tl.to(".video-wrapper-2", {
y: "0",
x: "0"
});
tl.to(".main-video", {
y: "0"
});
tl.to(".main-video", {
width: "0",
height: "0"
});
view more
Learn how to use a CSS clip-path and GSAP to create an unmasking scrolling transition.
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.