Jump to content
Search Community

Page Specific GSAP Timelines and tweens with barba

Fritz1602 test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi guys,

I have a generall question while starting to use GSAP with barba.

I wonder if someone of you could bring light into my JS-darkness at this early point. I am trying to find a solid basic setup with both of the libraries together.

 

barba.init({
    views: [{
            namespace: 'home',
            afterEnter(data) {
                initTimeline1(data.next.container);
                initTimeline2(data.next.container);
                initTriggeredTween(data.next.container); 
            },
        }]
       
    });

    const initTimeline1 = (next) => {
        const tl = gsap.timeline({})
        .to(next.querySelector('el1'),{'GSAP MAGIC'})
        return tl
    }

    const initTimeline2 = (next) => {
        const tl = gsap.timeline({scrollTrigger:{}})
        .to(next.querySelector('el2'),{'GSAP MAGIC'})
        return tl
    }

    const initTriggeredTween = (next) => {
         next.querySelector('el3').addEventListener('click', () => {
             gsap.to(next.querySelector('targetEl'),{'GSAP MAGIC'})
         })
    }

    barba.hooks.beforeEnter(
        () => {
            ScrollTrigger.getAll().forEach(trigger => {
                trigger.kill()
            });
            ScrollTrigger.refresh(true)
        }
    )

 

I leaned so far, that I have to kill the ScrollTriggers, because things dont work, if I return to the page with namespace"home".

 

But  if I reinititate the timelines, tweens and events again and again I am wondering if I am causing a memory leaks.

Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself?

 

And if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out?

I just read, that killAll is deprecated.

 

Sorry for my English, and the question which may be a little off topic.

 

Many thanks in advance

 

Link to comment
Share on other sites

32 minutes ago, Fritz1602 said:

Do I have to kill, remove, destroy all of them manually or does the garbage collection take care of things by itself?

You should kill off any relevant tweens and timelines yourself. 

 

33 minutes ago, Fritz1602 said:

if I have to manage the things, are there similar support functions like ScrollTrigger.getAll() for helping me out?

You should kill off ScrollTriggers using that (or something similar depending on your needs). For tweens and timelines you can do this if you need to get rid of all of them:

gsap.globalTimeline.clear()

 

  • Like 2
Link to comment
Share on other sites

Hi guys,
I'm trying to translate the friendly help from @ZachSaucier this thread into my code. For the first time in my life I am using a more OOP-based approach.

Anyway, I'm a little overwhelmed and wonder if I really understand this correctly.


In the pen I initialize 3 ScrollTrigger tweens, which I want to "eliminate" completely with the kill () method. (Regardless of whether they ran or not).

 

See the Pen ZEBGEKM by fsi77 (@fsi77) on CodePen

 

What irritates me is that when the tweens have finished animating, they can no longer be found in the global timeline anyway.
In my opinion, the kill function for the tweens after animation is aiming nowhere. 


In addition, the tweens remain in my object after the kill function. That can't be right somehow?

I really wonder if I am on the right track here.

 

Thanks in advance. Please excuse my English, I hope my question is understandable.

Link to comment
Share on other sites

Here's (part of) what the docs say about .kill():

Quote

Simply calling kill() (omitting the parameters) will immediately stop the animation, remove it from its parent timeline, wipe out any property tweens and release it for garbage collection.

The way (at least the main way - I'm not an expert in the internals of JavaScript) is by reference counting. But your array saves references to your tweens. So even though .kill() releases the object from GSAP's memory so it can be garbage collected, the references in your code keep it from being garbage collected. You can clear out your arrays if you are worried about this:

this.tweens = [];
this.triggerIndizes = [];

For more info about garbage collection I recommend this MDN page.

 

However, I don't know if that's the real issue that you're wanting to fix. 

  • Like 1
Link to comment
Share on other sites

Hey @ZachSaucier,

 

thanks a million for your efforts, aspects and references. 

 

Sorry for reaching the internals of JavaScript. Yes, that was exactly the issue I wanted to fix. 

My clumsy code prevented JS from cleaning up, which seems to be fixed with your suggestion.

 

From my point of view, you are a JS Internal Expert.🥇

 

I wondered if something like

 

gsap.killTweensOf(scrollerTrigger)

would be a cool feature?

 

Thank you and GSAP so much.

Link to comment
Share on other sites

  • Solution
7 minutes ago, Fritz1602 said:

I wondered if something like

 


gsap.killTweensOf(scrollerTrigger)

would be a cool feature?

You can get the animation attached to a ScrollTrigger and kill it by using the animation property:

myST.animation.kill()

But if I'm not mistaken ScrollTrigger should do that if you kill a ScrollTrigger so I'm not sure why you're wanting that in this case.

  • Like 1
Link to comment
Share on other sites

Oh Boy, 

@ZachSaucier  thank you for clarifying this. 

I misunderstood the docs of ScrollTrigger.kill() at this point.

 

Quote

Kills the ScrollTrigger instance, immediately unpinning and restoring any pin-related changes made to the DOM by ScrollTrigger and removing all scroll-related listeners, etc. so that the instance is eligible for garbage collection. 

 

For me it wasn't clear, that GSAP removes the related tweens from global timeline, which it perfectly does out of the box - exactly as you said.

 

Sorry for being such a noob and thanks a million. 

 

 

 

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...