Horrizontal effect with 3.pages
Sun Feb 11 2024 19:04:20 GMT+0000 (Coordinated Universal Time)
Saved by
@Zohaib77
//HTML
<section id="page-1"></section>
<section id="page-2"></section>
<section id="page-3"></section>
//CSS
sections{
height: 100%;
width: 100%;
}
//JS
let container = document.querySelector(".container");
let sections = gsap.utils.toArray("section");
let horizontal = gsap.timeline({
defaults: {
ease: "none"
},scrollTrigger: {
trigger: container,
pin: true,
scrub: 2,
end: () => "+=" + container.offsetWidth
}
})
horizontal.to(panels, {
xPercent: -100 * (sections.length -1)
})
content_copyCOPY
Comments