Thank You for this. It's working...
I need To handle last 2 arrow.
I little bit achieve this point but I am not able to synchronize arrow scroll Triger with content animation after completed.
gsap.registerPlugin(ScrollTrigger);
function updateView() {
let tlWrap = document.querySelector('.timeline-inner').offsetWidth;
gsap.set('.content', {
width: ((tlWrap - 50) / 4),
height: ((tlWrap - 50) / 4),
})
gsap.set('.arrow', {
height: ((tlWrap - 50) / 4),
})
gsap.set('.timeline-inner', {maxHeight: (tlWrap - 50) / 4, height:(tlWrap - 50) / 4});
}
updateView();
window.onresize = updateView;
let tw = gsap.timeline({
scrollTrigger: {
trigger: ".timeline-wrap",
scrub: true,
pin: true,
start: "center center",
// end: () => "+=" + document.querySelector('.timeline-wrap').offsetWidth,
end: "+=500%",
// id: "__TW",
// markers: {
// startColor: "yellow",
// endColor: "orange",
// indent: 500
// },
toggleActions: "play none none reverse"
}
})
tl = gsap.timeline({
scrollTrigger: {
trigger: ".content_1",
scrub: true,
// pin: true,
start: "top 73%",
end: "bottom center",
// id: "__tl",
// markers: {
// startColor: "blue",
// endColor: "pink",
// indent: 200
// },
toggleActions: "play none none reverse",
}
})
tl2 = gsap.timeline({
scrollTrigger: {
trigger: ".content_2",
scrub: true,
// pin: true,
start: "center center",
end: "+=200%",
id: "__tl2",
markers: {
indent: 0
},
toggleActions: "play none none reverse",
},
defaults: {
duration: 1
}
})
tl
.to('.circle1', {
width: "100%",
height: "100%"
})
.to('.content_1 .items', {
opacity: 1
}, '-=0.1')
.to('.content_1 .logo', {
opacity: 1
}, '-=0.5')
tl2
.to('.circle1', {
width: "115%",
height: "115%"
})
.to('.circle2', {
opacity: 1
}, '<')
.to('.circle1', {
width: "205%",
height: "205%",
}, '+=0.3')
.to('.circle2', {
width: "100%",
height: "100%",
}, '<')
.to('.rectangle1', {
opacity: 1,
width: "100%"
}, '<')
.to('.content_2 .items', {
opacity: 1
})
.to('.content_2 .logo', {
opacity: 1
}, '<')
.to('.content_2 .logo img', {
width: "11vw",
}, '<')
.to(".arrow1", {
scrollTrigger: {
trigger: ".arrow1",
scrub: 3,
start: "+=200% center",
end: "center center",
// id: "__TW_A",
// markers: {
// startColor: "red",
// endColor: "yellow",
// },
toggleActions: "play none none reverse"
},
left: "90%",
ease: "none",
})
.to(".arrow2", {
scrollTrigger: {
trigger: ".arrow1",
scrub: 2,
start: "+=252% center",
end: "center center",
// id: "__TW_A2",
// markers: {
// startColor: "orange",
// endColor: "#979900",
// },
toggleActions: "play none none reverse"
},
left: "90%",
ease: "none",
})
