[Adding delay to ScrollTrigger timeline.]

Thank you @Rodrigo. The long delays were only there to check if something really happened. But I didn't know that "a string with a number which GSAP interprets as an absolute position". I changed it to "scene-1" etc. and now it works.

[Adding delay to ScrollTrigger timeline.]

var mission_animation = gsap.timeline();

 

mission_animation.set(goal1, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "1")

mission_animation.to('body',{ delay: 80 }, "1")

mission_animation.set(goal1, { className: "block-mission__goal block-mission__goal--1 "}, "2")

mission_animation.set(link1, { className: "block-mission__link block-mission__link--1"}, "2")

mission_animation.set(link2, { className: "block-mission__link block-mission__link--2 block-mission__link--active"}, "2")

mission_animation.set(goal2, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "2")

mission_animation.to('body',{ delay: 10 }, "2")

mission_animation.set(link2, { className: "block-mission__link block-mission__link--1"}, "3")

mission_animation.set(link3, { className: "block-mission__link block-mission__link--3 block-mission__link--active"}, "3")

mission_animation.set(goal2, { className: "block-mission__goal block-mission__goal--1 "}, "3")

mission_animation.set(goal3, { className: "block-mission__goal block-mission__goal--1 block-mission__goal--active"}, "3")

mission_animation.to('body',{ delay: 10 }, "3")

 

I'm doing this, but the scrub rushes trough the scenes and only the last scenes is visible till I scroll out.

any ideas?

[ScrollTrigger Lottie, animate when already in viewport]

I have hooked up ScrollTrigger with Lottie and this works smoothly. But sometimes the animation is on top of the page and therefor already triggered. At this moment the animation finished animating. But I would like it to animate first and scrub when scrolling down. This is my code:

 

function LottieScrollTrigger(vars) {
  let playhead = {frame: 0},
    target = gsap.utils.toArray(vars.target)[0],
    st = {trigger: target, pin: false, start: "top bottom", end: "bottom top 50%", scrub: 1},
    animation = lottie.loadAnimation({
      container: target,
      renderer: vars.renderer || "svg",
      loop: false,
      autoplay: true,
      path: vars.path
    });
  for (let p in vars) {
    st[p] = vars[p];
  }

  animation.addEventListener("DOMLoaded", function() {
    gsap.to(playhead, {
      frame: animation.totalFrames - 1,
      ease: "none",
      onUpdate: () => animation.goToAndStop(playhead.frame, true),
      scrollTrigger: st
    });
    ScrollTrigger.sort();
    ScrollTrigger.refresh(); 
  });
  return animation;
}

LottieScrollTrigger({
  target: '#news-title',
  path: '/static/js/lottie-mte/news.json', 
  scrub: true,
  start: "top bottom", // when the top of the trigger hits the bottom of the viewport
  end: "bottom top 50%",
})

Any ideas?