How to control long animation and I need help to set column width in responsive according to container width using GSAP

[Anup 1 Likes (Newbie)]

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?

See the Pen NWXQRvy?editors=1010 by amrs (@amrs) on CodePen

[Cassie 5,072 Likes (Superhero)]

Hey there Anup,

 

I've taken a look but I'm not really sure what you're after - maybe GSAP set?

gsap.set('.elem', {width: var, height:var})

[Anup 1 Likes (Newbie)]

On 4/27/2022 at 8:42 PM, Cassie said:

Hey there Anup,

 

I've taken a look but I'm not really sure what you're after - maybe GSAP set?

gsap.set('.elem', {width: var, height:var})

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

 

[OSUblake 18,472 Likes (Superhero)]

Hi Anup,

 

It's not clear what you're asking or having problems with. Can you be a little be more specific with your question?

 

[Anup 1 Likes (Newbie)]

On 5/4/2022 at 10:07 PM, OSUblake said:

Hi Anup,

 

It's not clear what you're asking or having problems with. Can you be a little be more specific with your question?

 

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 

See the Pen NWXQRvy by amrs (@amrs) on CodePen

2nd Post URL 

See the Pen eYVpjLq by amrs (@amrs) on CodePen

[Cassie 5,072 Likes (Superhero)]

Sorry - I've tried to work out what you're after but I'm not really sure.

 

From taking a look at your code it seems like this could all be done easier on one scrollTriggered timeline though. Then you would be able to control the order with the position parameter really easily.