Width & height

[SaimAkbarFD]

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);

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi @SaimAkbarFD and welcome to the GSAP Forums!

 

Besides echoing the need of a minimal demo, this strikes me as a source of issues:

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);

Here you have two logic issues that you should avoid at all costs.

1. In your second timeline (animation0) you are animating the element ".circleImg" which is the trigger of the circleImg ScrollTrigger, that is in another timeline. Never animate the trigger element of the same or another ScrollTrigger instance, that is definitely a source of issues. On top of that, the first ScrollTrigger instance is pinning that element, so the styles added by ScrollTrigger to pin the element, could be conflicting with the width/height animation.
2. You are ading the animation0 Timeline as a child of the circleImg timeline. That means you have a timeline that is controlled by a ScrollTrigger instance, that is being added as a child inside another timeline that is controlled by a different ScrollTrigger instance. So which ScrollTrigger instance has precedence here? They're both trying to update the progress of the same timeline at the same time, see the problem?

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

Hopefully this clear things up.

Happy Tweening!

[SaimAkbarFD]

thanks for the replies

 

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