Enabling animation (with scroll trigger) only after current one finishes

[Trynix]

Hi everyone,

 

I just started learning GSAP few days ago, and I'm really loving what it has to offer, but keep coming across small challenges so please bear with me

 

I tried creating a simple codepen example attached (doesn't capture full complexity, but hopefully does the job). 

 

Basically I'll be running an animation somewhere, and only after that animation runs, another animation is setup with scrolltrigger intact. Idea is that if a person scrolls too fast then the 2nd animation (and associated scroll trigger) will not play until first animation is done. I use onComplete and a function to create the 2nd animation.

 

 

Issue I have is that the 2nd animation includes animating from autoAlpha 0, and because the animation only sets up after onComplete of the first one, then the elements of that 2nd animation are visible at the start until the onComplete function triggers and the 2nd animation is setup. I also tried setting elements of the 2nd animation to visibility hidden in CSS, but because i use splittext on the 2nd animation, the parent element stays hidden and the whole thing messes up.

 

Would appreciate thoughts on ideal approach to handle this, and if the approach is correct then how do I deal with the elements being visible before animation is setup please.

 

I also have few followup questions (independent of each other) that I'd greatly appreciate input on (if creating separate topic for each question is preferred, please let me know, I just didn't want to spam the forum when they are small questions):

- In general, is there a reason to use opacity over autoAlpha at any point, or should I just default to using autoAlpha?

- On a different instance I have a grid of 2 columns. On desktop, the two columns are side by side and will follow a single timeline based on scrolltrigger, on mobile (since the grid will become 1 column of two rows due to narrower screen) the timeline will be split and the scroll triggers will be different for each row. Is it best to create completely separate timelines for mobile and desktop and bind them with matchmedia, or is there a way to somehow combine the timelines on desktop (with slight variation) and separate them on mobile?

- I have image containers and each container has a number of images. By default, There's an animation common across all containers (i.e. animate each child image from y:20), and then there are slight variations depending on the content (some images will jitter in place, etc). Is it best to create separate timeline for each container so that all desired animations are handled correctly, or can I somehow mix and match different pre-made animations depending on defined attributes of the container?

 

Looking forward to any thoughts, and thank you very much!!

See the Pen OJOpQMv by mazayadigital (@mazayadigital) on CodePen

[OSUblake]

Hi Trynix,

 

If possible, I would try to create your ScrollTriggers ahead of time as ScrollTriggers should be created in the order they appear. Maybe you could do something like this.

 

 

I would also do the split ahead of time, and if I need to fade something in, I almost always set the opacity in the CSS instead of doing a .from() animation to avoid FOUC. So you could do that like this.

 

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

 

8 hours ago, Trynix said:

- In general, is there a reason to use opacity over autoAlpha at any point, or should I just default to using autoAlpha?

 

I always default to opacity. autoAlpha is helpful is some situations, like if you have event handlers that you don't want active.

 

 

8 hours ago, Trynix said:

On a different instance I have a grid of 2 columns. On desktop, the two columns are side by side and will follow a single timeline based on scrolltrigger, on mobile (since the grid will become 1 column of two rows due to narrower screen) the timeline will be split and the scroll triggers will be different for each row. Is it best to create completely separate timelines for mobile and desktop and bind them with matchmedia, or is there a way to somehow combine the timelines on desktop (with slight variation) and separate them on mobile?

 

It sounds like you should be going for matchMedia. If you're trying to reduce repeating code, use functions to your advantage. You can pass in parameters to customize stuff how ever you want.

 

ScrollTrigger.matchMedia({
  "(min-width: 960px)": function() {

    gsap.timeline()
      .add(createAnimation1(400))
      .add(createAnimation2(400), 0);
    
    createTrigger();
  },
  "(max-width: 959px)": function() {

    gsap.timeline()
      .add(createAnimation1(100))
      .add(createAnimation2(200));
  }	
}); 

function createAnimation1(x) {
  return gsap.to(".foo", { x: x });
}

function createAnimation2(y) {
  return gsap.to(".foo", { y: y });
}

function createTrigger() {
  gsap.timeline({
    scrollTrigger: {
      ...
    }
  })
}

 

8 hours ago, Trynix said:

if creating separate topic for each question is preferred, please let me know

 

Yes, it's better to create a separate topic. And be sure to always include a minimal demo. It's very hard to answer animation related questions without one. 😁

 

[Trynix]

6 hours ago, OSUblake said:

Hi Trynix,

 

If possible, I would try to create your ScrollTriggers ahead of time as ScrollTriggers should be created in the order they appear. Maybe you could do something like this.

 

 

I would also do the split ahead of time, and if I need to fade something in, I almost always set the opacity in the CSS instead of doing a .from() animation to avoid FOUC. So you could do that like this.

 

 

 

 

 

I always default to opacity. autoAlpha is helpful is some situations, like if you have event handlers that you don't want active.

 

 

 

It sounds like you should be going for matchMedia. If you're trying to reduce repeating code, use functions to your advantage. You can pass in parameters to customize stuff how ever you want.

 

ScrollTrigger.matchMedia({
  "(min-width: 960px)": function() {

    gsap.timeline()
      .add(createAnimation1(400))
      .add(createAnimation2(400), 0);
    
    createTrigger();
  },
  "(max-width: 959px)": function() {

    gsap.timeline()
      .add(createAnimation1(100))
      .add(createAnimation2(200));
  }	
}); 

function createAnimation1(x) {
  return gsap.to(".foo", { x: x });
}

function createAnimation2(y) {
  return gsap.to(".foo", { y: y });
}

function createTrigger() {
  gsap.timeline({
    scrollTrigger: {
      ...
    }
  })
}

 

 

Yes, it's better to create a separate topic. And be sure to always include a minimal demo. It's very hard to answer animation related questions without one. 😁

 

Thank you very much for your feedback! So I went ahead and changed CSS settings for the different elements I plan to animate, but then I realised that I can't animate with gsap.from() anymore since I need to specify that i want gsap.to  opacity:1 (instead of gsap.from opacity:0, since opacity will remain 0). 

Does this mean I have to do a gsap.set opacity:1 for all elements that have CSS setting of opacity 0, just before timeline creation (if my plan is to continue using gsap.from), or is there another approach?

 

 

[OSUblake]

You can always do a fromTo animation, but actually the way I set that demo up, you could still do a regular from because I have the <p> element hidden in CSS.

 

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

 

[Trynix]

Thank you!! All is working well now