xxxxxxxxxx
var let = gsap.timeline({
delay: 1
});
ScrollTrigger.create({
trigger: '.one',
animation: let,
start: 'top 0%',
end: 'bottom 0%',
scrub: true,
pin: true,
toggleClass: 'active'
});
let.to('.h1', { 'clip-path':'inset(0 0 100%)' })
.to('.h1', { background: '#000' },"<")
xxxxxxxxxx
//Query all your html elements to animate them independently
document.querySelectorAll('.css-selector')?.forEach(elem => {
let tl = gsap.timeline({
//Scroll triggers params
scrollTrigger: {
markers: true, //false to disable
start: 'top center', // Top left (top) is the start marker for the targeted element. Top right (center) is the start marker for the scroller (viewport)
end: 'bottom 30%', // Bottom left (bottom) is the end marker for the targeted element. Bottom right (30%) is the end marker for the scroller (viewport)
trigger: elem, //Targeted elemet which we'll put our markers on (result of our selector all)
scrub: false, //Links the progress of the animation directly to the scrollbar (true to enable it).
once: true,//Animating only one time (false to disable)
}
})
//Tweening
tl.fromTo(elem, {
x: 100,
}, {
x: 0,
});
/* you can add more 'to'. they will animate when the fromTo has ended
tl.to(elem, {
y: 100,
});
*/
})