How do you add a trigger on multiple timelines within timelines?

[Beaowulf]

  var masterTimeline = new TimelineMax();
masterTimeline
  .add(part1())
  .add(part2(), "-=2.2")
  .add(part3(), "-=2.2")
  .add(part4(), "-=2.2");

 

 

part1, part2.... all of these are multiple timelines with animations inside of them.

Only "trigger" that the animations have are for example this: All my animations are about the same code as below...

 

 

"
    tl.from(".card4 .sect8-greentick-text p", {
            scrollTrigger:{
                trigger: ".card1", //Here
            },
            stagger: 0.1,
            autoAlpha: 0,
            duration: 0.5,
            x: "-50",
          }, '<.2');
""

 

Question is how do I add a Parent trigger on masterTimeline? to run all animations?

[ZachSaucier]

Hey Beaowulf. Having ScrollTriggers on tweens inside of timelines doesn't make much sense and is one of the most common ScrollTrigger mistakes. 

 

Your end goal isn't clear. If you'd like additional code help, please make a minimal demo:

 

Also we highly recommend upgrading to the more modern GSAP 3 formatting:

 

[Beaowulf]

Thanks for your response, Im still at a noob phase and im trying to learn,

 

 

I hope the above (Screenshot) makes sense. My main goal that I cant seem to achieve is: "When I scroll at this section of the website" I want my animations to start playing.

 

The screenshot provided above plays as follow.

1st box. 1st box will come from bottom up, 2nd text will start displaying 1 by 1.

same for 2nd box, 3rd box and 4thbox.

 

 

1st box is its own timeline..

2nd box its own......4th its own. All these are within a bigger masterTimeline. as shown on the code:

 

"

var masterTimeline = new TimelineMax();
masterTimeline
  .add(part1())
  .add(part2(), "-=2.2")
  .add(part3(), "-=2.2")
  .add(part4(), "-=2.2");

 

"

So back to my main goal, how and or where should / can I add the trigger. Right now just as I load the website its playing without me even reaching there (i.e I cant seem to get the trigger point right)...

 

 

 

Thanks for answering this fast If more info is needed I will try to create my example on codepen...

[ZachSaucier]

4 hours ago, Beaowulf said:

how and or where should / can I add the trigger

It sounds like you want to add it to the master timeline. You shouldn't have ScrollTriggers on tweens or timelines that are within timelines.

[Beaowulf]

14 minutes ago, ZachSaucier said:

It sounds like you want to add it to the master timeline. You shouldn't have ScrollTriggers on tweens or timelines that are within timelines.

Yeah kinda struggling with how exactly

[ZachSaucier]

If you'd like help with the code, please make a minimal demo as requested  

 

[Beaowulf]

hey @ZachSaucier

 

While creating the sample code in codepen I found a way to fix it according to what you have told me to do!

 

I will also be reading up on migrating to gsap3, thanks alot for your help!

 

 

 

I will post the code below (for reference)...

 

var masterTimeline = new TimelineMax({

    scrollTrigger:{

      trigger:".card",

      markers: true,

      start:"50% bottom",

      end:"bottom bottom",

      }});

  

masterTimeline

.add(part1())

.add(part2(), "+0.7")

.add(part3(), "+1.2")

.add(part4(), "+1.5")

 "

[ZachSaucier]

On 11/15/2020 at 2:43 AM, Beaowulf said:

I found a way to fix it according to what you have told me to do!

Good work!

 

On 11/15/2020 at 2:43 AM, Beaowulf said:

I will also be reading up on migrating to gsap3, thanks alot for your help!

Glad to hear it. In your code, that means switching out new TimelineMax for gsap.timeline. 

 

One other thing: "+0.7" doesn't make much sense. You either want just 0.7 or "+=0.7" as the position parameter. For more info see this post.

[Beaowulf]

"Glad to hear it. In your code, that means switching out new TimelineMax for gsap.timeline.  " - Noted and fixed!

 

"One other thing: "+0.7" doesn't make much sense. You either want just 0.7 or "+=0.7" as the position parameter. For more info see this post." -Will read!

 

Again thanks