Jump to content
Search Community

Timelines modularity and ScrollTrigger best practices

Apnw2 test
Moderator Tag

Recommended Posts

let master_timeline = gsap.timeline();
create_animation();

function create_animation(){
  master_timeline.add("start")
  .add(create_scrolltriggered_animation(), "start")
  .add(create_other_subpart_animation(), "start")
  .add(...);
}
       
function create_scrolltriggered_animation() {
    let res = gsap.timeline({scrollTrigger: {scrub: true, ...}});
                             
    res.add("start")
    .add(create_scrolltriggered_animation_part_one(), "start")
    .add(create_scrolltriggered_animation_part_two(), "start");  
  
  	return res
}

function create_scrolltriggered_animation_part_one() {
    let res = gsap.timeline();
  
    res.add("start")
    .to(target, {...}, "start")
    .fromTo(other_target, {...}, {...} , "start");
    
    return res
}
        
function create_scrolltriggered_animation_part_two() {
    // Very similar to part_one but for other targets
}
 
function create_other_subpart_animation() {
    // Very similar to "create_scrolltriggered_animation" but with no scrollTrigger
}

Hello, I'm trying to figure what is the best practice to combine timelines and scrollTrigger in a modular and clean way but I don't find any answer.
The following code extract corresponds to the standard way I'm trying to create Timelines, which works great with no scrolltrigger. But, in this code, ..._part_one and ..._part_two are played immediately and not controlled by the scrolltrigger defined in the function "create_scrolltriggered_animation".
So what is the best way to adapt this and make ..._part_one and ..._part_two be controlled by the scrolltrigger in the parent timeline ?

Link to comment
Share on other sites

1 hour ago, Apnw2 said:

So what is the best way to adapt this and make ..._part_one and ..._part_two be controlled by the scrolltrigger in the parent timeline ?

 

I think, best practice would be to not try to have a master timeline control child-timelines that have ScrollTriggers attached, as you will probably be creating a very similar scenario to when you have a simple timeline with multiple tweens that have ScrollTriggers attached, which is one of the most common ScrollTrigger mistakes.

 

If I am not mistaken, @GreenSock's explanation from the thread linked below should apply to your scenario, too.

 

On 6/20/2022 at 5:15 AM, GreenSock said:

You can't have multiple ScrollTriggers inside one timeline. It's logically impossible because the scrollbar -OR- the parent timeline's playhead can control the animation's playhead, not both

 

It's tough to offer advice without a minimal demo but you shouldn't be afraid to have 5, 10 or even more ScrollTriggers on one page. It's optimized for performance already.  

 

 

 

  • Like 2
Link to comment
Share on other sites

Thank your for your answer @akapowl 🙂

But honestly I don't really like the answer (😅) because it makes me pretty confused on how to properly solve different problems such as for example :

 

  • In having a master timeline, we could easily keep track of it and for example kill it to recompute it on window resizing or on navigating through different pages. How to do such a thing if multiple ScrollTriggers are defined at multiple places in the code ?
     
  • If some timelines share exactly the same ScrollTrigger part except that they have different scrub values or end values for example, I thought that we could avoid redefining the shared ScrollTrigger definition in having it placed in a common parent timeline. As it is not a good practice, is there a good one to avoid code duplication ?

 

Thank's a lot for your patience

PS: I don't know if it could be relevant but I'm using Vue.js

Link to comment
Share on other sites

1 hour ago, Apnw2 said:

In having a master timeline, we could easily keep track of it and for example kill it to recompute it on window resizing or on navigating through different pages. How to do such a thing if multiple ScrollTriggers are defined at multiple places in the code ?

There are multiple strategies I can think of...

  • Check out ScrollTrigger.matchMedia() which manages much of that for you.
  • Store references to your animations/ScrollTriggers in variables or an Array that you can then loop through and kill. Or there are methods like gsap.killTweensOf(), ScrollTrigger.getAll(), ScrollTrigger.getById(), etc. that can save you from storing references.

We're actually working on a fun new feature that may simplify some of this for you too, but I can't elaborate on that yet. Just saying that you should stay tuned for a future release :)

 

1 hour ago, Apnw2 said:

If some timelines share exactly the same ScrollTrigger part except that they have different scrub values or end values for example, I thought that we could avoid redefining the shared ScrollTrigger definition in having it placed in a common parent timeline. As it is not a good practice, is there a good one to avoid code duplication ?

Like @akapowl said, you definitely should not be putting tweens/timelines with ScrollTriggers into a master timeline. As discussed, it's logically impossible for a master timeline's playhead to control the child's playhead AND simultaneously have the scrollbar position also control it. They'd be telling it to go to completely different places. 

 

It's hard to give you advice without a minimal demo, but it should be pretty straightforward to avoid code duplication by leveraging a parameterized function that you feed similar stuff through. 

  • Like 2
Link to comment
Share on other sites

42 minutes ago, GreenSock said:

We're actually working on a fun new feature that may simplify some of this for you too, but I can't elaborate on that yet. Just saying that you should stay tuned for a future release :)

Can't wait to see it 😉

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...