GSAP Scroll Trigger

Tutorial

QR code to Billie Tuitt's instagram, scan with phone
Youtube Tutorial
Webflow
Creative Development
GSAP Animation
[london baseD: 
00:00
]
[
youtube 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

[video coming soon]
GSAP Video Scroll Trigger
[
GSAP Video Scroll Trigger
]
clone project

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

scroll
GSAP Clipping Mask Tutorial
[
GSAP Clipping Mask
]

Learn how to use a CSS clip-path and GSAP to create an unmasking scrolling transition.

view resource
Tutorial
[
GSAP Flip Change View
]

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.

view resource
Tutorial
[
Object Fit Videos
]

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.

view resource
[drag]