Anup

Hey everyone, I'm looking freelancer for GSAP developers who can work immediately. You can check PDF file for animation and design https://3940583.fs1.hubspotusercontent-na1.net/hubfs/3940583/2022 - LP assets - SABM/TIS_GBR_2678 _ Educate Timeline - DesktopAnimatic-v5-sml.pdf You can connect with my email id (anup@hermitcrabs.io) or google meet Thanks!

Sorry for my English. In my first post everything is correct but chevron animation is not correct. But my 2 posts, the animation of chevron is correct but after the animation of circle and content is over, the chevron animation will run. I am not good in GSAP ScrollTrigger. 1st Post URL https://codepen.io/amrs/pen/NWXQRvy 2nd Post URL https://codepen.io/amrs/pen/eYVpjLq

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", })

Hi, Guys I just want to add Column Width and Height using GSAP not JQuery. And also I need help with Animation can you help me. What is the problem with this Code?