Apply isActive() to a variable tween into a function

[PedroZorus 1 Likes (Newbie)]

I've create a function which scrolls to the next anchor detecting the scroll direction (See below)

 

const
    CONTAINER_STRING = '#main-container>main',
    CONTAINER = document.querySelector( CONTAINER_STRING )

let currentChild = 0

gsap.registerPlugin( ScrollToPlugin )

CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => {


    if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 )
        currentChild++

    if ( currentChild > 0 && deltaY < 0 )
        --currentChild

    gsap.to( CONTAINER, .5, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } )

}, { passive: true } )

 

My problem is i can't detect if gsap is currently tweening in my page. I've tried some tricks like extract the tween into a variable, but nothing works... 🤔

So how can i detect an interpolation in my page or detect if this specific tween is active ?

[GreenSock 13,314 Likes (Superhero)]

If I understand your question correctly, there are many ways to do this...

 

1) gsap.isTweening(CONTAINER) - that's an easy test to see if GSAP is currently animating a particular object.

 

2) Store the tween in a variable, and then check its isActive() value. 

 

There are several others, but I don't want to overwhelm you. My bigger question is WHY do you want to know if it's tweening? If your goal is to have the new tween overwrite the old one, all you need to do is set overwrite: true on the new tween. That'll immediately kill all other tweens of that same target. 

[PedroZorus 1 Likes (Newbie)]

Hi, to answer at the "WHY" : Every time the user scroll the function is executed, and I want to prevent the function if the tween is active.

 

And by the way, I can't store the tween into a variable because the contained variables are no updated at the function call (i don't understand why)

 

And the below snippet print all console.logs but never starts the tween 😕

const
    CONTAINER_STRING = '#main-container>main',
    CONTAINER = document.querySelector( CONTAINER_STRING )

let
    currentChild = 0,
    tween = gsap.to( CONTAINER, .5, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } )

gsap.registerPlugin( ScrollToPlugin )

CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => {

    if ( !tween.isActive() ) {
        if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 )
            currentChild++

        if ( currentChild > 0 && deltaY < 0 )
            --currentChild

        tween.play()
        console.log( 'tween' )
    }
    console.log( 'function' )

}, { passive: true } )

 

EDIT :

const
    CONTAINER_STRING = '#main-container>main',
    CONTAINER = document.querySelector( CONTAINER_STRING )

let currentChild = 0

gsap.registerPlugin( ScrollToPlugin )

CONTAINER.addEventListener( 'wheel', ( { deltaY } ) => {

    if ( !gsap.isTweening( CONTAINER_STRING ) ) {
        if ( currentChild < CONTAINER.childElementCount - 1 && deltaY > 0 )
            currentChild++

        if ( currentChild > 0 && deltaY < 0 )
            --currentChild

        gsap.to( CONTAINER, .4, { scrollTo: '#' + document.querySelector( `${CONTAINER_STRING}>:nth-child(${currentChild + 1})` ).id } )
    }

}, { passive: true } )

I've tried with the global gsap method and the snippets works properly but I would have preferred the second option. Either way, won't that pose a performance problem?

 

[ZachSaucier 6,797 Likes (Superhero)]

Hey Pedro. Can you please create a minimal demo of your issue? It will help us help you more easily and clearly.

[PedroZorus 1 Likes (Newbie)]

- This is my project (needs of a lot of pieces to work so it's a big "minimal repository" 😅)

https://github.com/pierredarrieutort/Jape/tree/unique-project-pages

 

- You can find the file at this place:

https://github.com/pierredarrieutort/Jape/blob/unique-project-pages/src/scripts/projects_preview.js

 

- It acts on this file:

 https://github.com/pierredarrieutort/Jape/blob/unique-project-pages/src/pages/project-preview.ejs

 

If you clone and launch the dev script, the incriminated page is Illustration or Graphic Design when you click on the menu

[ZachSaucier 6,797 Likes (Superhero)]

That's definitely not a minimal demo. A minimal demo means you strip everything that is not relevant to the error that you're asking about (including build systems if they are irrelevant, which they are in this case). 

 

However, if I'm understanding you correctly, you likely can just do something like this:

let tween
if ( !!document.querySelector( '#main-container>main#project-preview' ) && (typeof tween === "undefined" || !tween.isActive()) ) {
  // ...
  
  tween = gsap.to( CONTAINER, // ...