Scroll horizontally and scroll Start from Center.

[ann1640]

May I know if there is any way to make the initial box start from the center and scroll horizontally to the left? Is it doable using GSAP?

See the Pen XWxZyEB by anniey-looi (@anniey-looi) on CodePen

[Rodrigo]

Hi,

 

You could create a timeline and animate the entire container first and then the sections:

let sections = gsap.utils.toArray(".container .panel");

gsap.set(".container", {
  x: () => ((window.innerWidth / 2) - sections[0].clientWidth / 2)
});

gsap.timeline({
  scrollTrigger: {
    trigger: ".side-scrolling-wrapper",
    start: "top top",
    markers: true,
    scrub: 0.5,
    snap: 0.1,
    end: () => "+=" + document.querySelector(".container").offsetWidth
  }
})
.to(".container", {
  x: 0,
  duration: 0.5 / sections.length,
  ease: "none",
})
.to(sections, {
  xPercent: -180 * (sections.length - 1),
  ease: "none",
  opacity: 1,
});

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!