Play two gltf animation in two separate sections based on scroll

[moody]

hi , hope you all doig fine ;

 

i succeed to run one animations in one section using using gsap scrolltrigger as you guys seeing  on the example however: i have two animatios here , animation[0] and animation[1] , i need to run the two animatioins in two separate sections based on scroll , thanks you all 

See the Pen xxzVZop?editors=0110 by MOODYWAA (@MOODYWAA) on CodePen

[Rodrigo]

Hi,

 

The problem I'm seeing is that when you create both animations the proxy object's time property is 0, so both animations in bot sections are doing exactly the same job, taking the time property from 0 to 1.625. You can see that if you log the proxy.time property on the object's setter:

let proxy = {
  get time() {
    return mixer.time;
  },
  set time(value) {
    action.paused = false;
    mixer.setTime(value);
    action.paused = true;

    console.log(proxy.time);// Goes from 0 to 1.625 in both sections
  }
};

This seems to do what you want:

let scrollingTL = gsap.timeline({
  scrollTrigger: {
    trigger: ".section-four",
    ease: "Power4",
    end: "+=5000px",
    markers: true,
    pin: true,
    scrub: 2,
    onUpdate: function () {
      camera.updateProjectionMatrix();
    }
  }
});
scrollingTL.fromTo(proxy, {
  time: 0,
}, {
  time: clip.duration / 2,
});

/// I NEED TO RUN ANIMATION [1] HERE ///

let scrollingTL1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section-five",
    ease: "Power4",
    end: "+=5000px",
    markers: true,
    pin: true,
    scrub: 2,
    onUpdate: function () {
      camera.updateProjectionMatrix();
    }
  }
});
scrollingTL1.fromTo(proxy, {
  time:  clip.duration / 2,
  immediateRender: false,
}, {
  time: clip.duration,
});

Let us know if you have more questions.

 

Happy Tweening!

[moody]

On 11/2/2022 at 6:09 PM, Rodrigo said:

Hi,

 

The problem I'm seeing is that when you create both animations the proxy object's time property is 0, so both animations in bot sections are doing exactly the same job, taking the time property from 0 to 1.625. You can see that if you log the proxy.time property on the object's setter:

let proxy = {
  get time() {
    return mixer.time;
  },
  set time(value) {
    action.paused = false;
    mixer.setTime(value);
    action.paused = true;

    console.log(proxy.time);// Goes from 0 to 1.625 in both sections
  }
};

This seems to do what you want:

let scrollingTL = gsap.timeline({
  scrollTrigger: {
    trigger: ".section-four",
    ease: "Power4",
    end: "+=5000px",
    markers: true,
    pin: true,
    scrub: 2,
    onUpdate: function () {
      camera.updateProjectionMatrix();
    }
  }
});
scrollingTL.fromTo(proxy, {
  time: 0,
}, {
  time: clip.duration / 2,
});

/// I NEED TO RUN ANIMATION [1] HERE ///

let scrollingTL1 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section-five",
    ease: "Power4",
    end: "+=5000px",
    markers: true,
    pin: true,
    scrub: 2,
    onUpdate: function () {
      camera.updateProjectionMatrix();
    }
  }
});
scrollingTL1.fromTo(proxy, {
  time:  clip.duration / 2,
  immediateRender: false,
}, {
  time: clip.duration,
});

Let us know if you have more questions.

 

Happy Tweening!

@Rodrigo , Rodrigo thank you for your replay , i think i understand your sulotion but !! when i implment your sulotion it didnt work if you look at the (codepen code)  still it dosent work its the same as you see ? 

[Rodrigo]

Hi,

 

The only thing I'm seeing is a jump between the initial state of the cube and the first frame of the animation, but that has to do with your setup and not GSAP. The initial state of the cube should be the first frame of the animation in order to make it look seamless.

 

Happy Tweening!