Start animation when in view but after previous animation

[JE551]

Hello, 

I'm sorry if this has been asked before but I'm trying to animate a flow chart when it's scrolled into view. I only want to animate in the step in the flow chart when it's in view and only if the previous step has finished animating. 

Here's a quick codepen (sorry for the repetitive functions) of what I have, I've tried to use a delay based on how much of the previous animation is left to play but it's not behaving as intended. Meaning it adds a delay when that step is in view even if the other animation is complete and in this case what I want is that it plays instantly without a delay since the previous one is complete and the current step is in view (I want it to be seamless, steps of the flow chart animate in as it comes into view).

See the Pen ExRagvd by JE551 (@JE551) on CodePen

but unsure if this is the best way to do this as I've read it may not be ideal to create a scrollTrigger after the page has loaded.  

I'm probably going about this wrong but would love some direction or support on this.

See the Pen YzvPqOx by JE551 (@JE551) on CodePen

[alig01]

Hey, 

 

4 hours ago, JE551 said:

I've read it may not be ideal to create a scrollTrigger after the page has loaded

I'm not sure if I not aware of something or don't understand it correctly, but the page needs to load all the content first to set the markers correctly. So you should be able to use scrollTrigger.

 

I cleaned up your second codepen and it doesn't look bad to me, but unfortunately I don't have enough time to look at the question in more detail because it's already late. 

 

See the Pen VwdYWoq by alig01 (@alig01) on CodePen

 

Hope this somehow helps

[JE551]

Thanks @alig01 your solution looks a lot cleaner, really appreciate you taking the time to respond so quickly.

Regarding adding ScrollTriggers after the page has loaded, I 100% am the confused one🙈. When I set-up GSAP timelines, without any scroll triggers my go to method is something like this:

var gsapTL = gsap.timeline();

function init() {
 //Add some stuff to gsapTL
}

window.addEventListener("load", function(event) {
  //run the init function after page load
	init();
});

I grabbed the code above from a tip from this video (3:10min mark).

But let's say I am using ScrollTrigger with my timelines, using your pen as an example, should I lay it all out in the load event listener; basically call it all after the page loads? I'm assuming yes because what you mentioned about markers being set-up properly makes sense, I should probably wait for the page to load everything before I set-up markers to make sure the markers are positioned accurately. 

window.addEventListener("load", function (event) {
let flowCharts = gsap.utils.toArray(".flow-chart-item");

flowCharts.forEach((chart) => {
  let box = chart.querySelector(".flow-chart-item-inner");
  let line = chart.querySelector(".flow-chart-line");

  let steps = gsap.timeline({
    scrollTrigger: {
      trigger: chart,
      start: "0 50%",
      markers: true
    }
  });

  steps
    .to(box, {
      scale: 1,
      opacity: 1,
      autoAlpha: 1
    })
    .to(
      line,
      {
        opacity: 1,
        autoAlpha: 1,
        width: "58%"
      },
      "<+=50%"
    );
});
});

 

[alig01]

No problem, I hope the animation looks like you imagined.

 

Sorry if I have caused confusion (, regarding scrollTrigger). The layout of the page is based on your html+css, so the scrollTrigger does its calculation based on that. As long as nothing occurs afterwards that can cause layout changes, you have nothing to worry about (there will be an automatic recalculation anyway, and if this doesn't help, you can call a refresh()).

 

In the video, Carl "just" wants to make sure his timeline doesn't start animating before the content (images) is loaded and everything is in sync.

 

[JE551]

Oh gosh nothing to apologise for, THANK YOU🙏 for taking the time to explain all of this and the refresh() tip will definitely come in handy for me.