Combine gsap.timeline.to.() and ScrollTrigger for the same div

[Jacot Sylvain]

Hello Everyone !

Trying to reproduce one of the animation from Aurelien Salomon, I'm blocked on one thing.

 

Let's focus on the red block only (and full screen).

https://codesandbox.io/s/festive-saha-60xed?file=/src/App.js:0-26

 

It is a react app

The gsap animations are in the gsap-animations.js file and imported into MainBg.js

 

The red block is supposed to come from the right when the page is refreshed AND go in the center of the page when it's "ScrollTriggered".

Here a gif showing what behavior the red block should have :

https://res.cloudinary.com/dnr3vs711/image/upload/v1605456169/gsapissue_gtadfn.gif

 

Here an overview of the actual code regarding the red block :

 - The red block appears from the right side (included into a timeline)

    timeLine.to(
      FirstBlockRef.current,
      {
        duration: 1.3,
        visibility: "visible",
        translateX: "-30%",
        ease: Power2.easeOut,
      },
      ">-1"
    )

 

then the redblock is supposed to move again with ScrollTrigger

timeLine.fromTo(
    FirstBlockRef.current,
    {
      duration: 1.3,
      visibility: "visible",
      translateX: "-30%",
      ease: Power2.easeOut,
    },
    {
      scrollTrigger: {
        trigger: FirstBlockRef.current,
        start: "bottom center",
        end: "bottom 100px",
        scrub: true,
        markers: true,
      },
      translateX: "-50%",
      duration: 3,
      ease: Power2.easeOut,
    }
  );
};

 

 

If anyone knows could help on, it will be really appreciated

 

Thank you so much, love ❤️

[Jacot Sylvain]

Ok found the solution with

immediateRender: false,

[ZachSaucier]

Good work finding a solution! We highly recommend going through the most common GSAP mistakes and the GSAP 3 migration guide articles and improving your syntax