[freelance GSAP developers need ASAP]

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!

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

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

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

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

 

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

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