Both animation objects firing within one 'marker'

[Chris_Melich]

Hello folks!

 

I am getting a hang of ScrollTrigger, this being my 3rd one and got a little stuck at this:

 

 

so I have two parent elements with 2 children in it. The childrens contain text.

 

The goal is that at the first set of markers the 1st parent will trigger and once reached the second set of markers the 2nd parent will trigger. 

 

But for some reason when I am reaching the end of the first set of markers the 2nd parent is triggering and when reached the second set of markers it just resets and starts making chaos.

 

Would you mind looking at this?

 

Thank you very much!

 

Best,

Chris.

See the Pen MWyENwm by h0nst3r (@h0nst3r) on CodePen

[akapowl]

 

Hey @Chris_Melich

 

That is because you are trigerring both tweens for each element.

 

You'd have to change your JS up a bit, so you trigger only the animation with its neccessary values that you want to animate.

 

I tweeked things a bit in the following pen. Just one possible solution to this.

 

See the Pen 2d08a0e071ea9474074d43d04595ab4e by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps.

Cheers,

Paul

 

[Chris_Melich]

Hey @akapowl,

 

amazing! Thank you solved my issue, totally makes sense now when I am looking into it. 

 

Thanks :).

[akapowl]

 

You're very welcome @Chris_Melich

 

I also noticed, that your .mom_line is a bit off center - it doesn't stitch together neatly when scrolling down.

 

You could probably fix this by changing your CSS for the .over-left & .over right to

 

.txt_overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background: white;
  &.over_left {
    top: 0;
    right: 430px;
  }
  &.over_right {
    bottom: 0;
    left: 430px;
  }
}

 

from the former 428px for each ( 2px more than before due to half the width of your .mom_line ) but then you'd also have to make sure, the text itself lines up again neatly to this when animating and so forth.

 

But since I see, that it is not perfectly responsive yet, you are probably still getting to this.

Just wanted to let you know anyways.

 

Cheers.

 

See the Pen a606e27e54b9f752f790b4012f490d9f by akapowl (@akapowl) on CodePen

 

[Chris_Melich]

Hey @akapowl,

 

wow, thats so nice of you to taking time to address even this! 

 

I really appreciate it! Such a great community, love it

 

Yes as you mentioned is a work in progress, I fixed it in the 'whole' thing if you interested you can take a look: https://zebreo.com/ask-our-moms access code: o1xezsotq3

 

Thank you again, have a nice day! 

[akapowl]

 

Looks great, good job!

 

Love, how your scroll-indicator morphs into that divider-line - might consider taking that as an inspiration for myself 😁.

 

[Chris_Melich]

Hey @akapowl,

 

thanks! I am only a beginner in all of this GSAP magic but damn, its a fun experience learning it and with all of the love support of the forum it just gets better!

 

I would be honored if it would give you some inspiration, the amount of inspiration I have already taken from other codepens is really big so if I can give back in any way I will be glad :D!