SaimAkbarFD

thanks for the replies i understand @Rodrigo and i was able to solve the height width by using scale property

hello, new in gsap. the issue i am facing is that there is an element which i want to came along side when i scroll and behave different in each section. i got this working. the issue i am facing is that how do i change height and width as well. i cant do it, it remains the same no matter what is change. any help would be appreciated let circleImg = gsap.timeline({ scrollTrigger: { trigger: ".circleImg", endTrigger: ".aiana-projects", pin: true, pinSpacing: false, scrub: true, start: "center center", end: "bottom 10%", // markers: true, }, }); // Animation for section 1 let animation0 = gsap.timeline({ scrollTrigger: { trigger: ".aianaFeture-2", start: "center center", end: "bottom top", scrub: true, // markers: true, }, }); animation0.to(".circleImg", { xPercent: 120, // Move horizontally in section 1 height: "1000px", width: "1000px", }); circleImg.add(animation0); // Animation for section 1 let animation1 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects1", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation1.to(".circleImg", { xPercent: 0, // Move horizontally in section 1 }); circleImg.add(animation1); // Animation for section 2 let animation2 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects2", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation2.to(".circleImg", { xPercent: -120, // Move vertically in section 2 }); circleImg.add(animation2); // Animation for section 3 let animation3 = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects3", start: "top top", end: "bottom top", scrub: true, // markers: true, }, }); animation3.to(".circleImg", { xPercent: 0, // Rotate in section 3 }); circleImg.add(animation3); // Fade out when reaching the target section let fadeOutAnimation = gsap.timeline({ scrollTrigger: { trigger: ".aiana-projects", start: "top center", end: "bottom center", scrub: true, // markers: true, }, }); fadeOutAnimation.to(".circleImg", { opacity: 0, // Fade out the div }); circleImg.add(fadeOutAnimation);