Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PedroZorus

Apply isActive() to a variable tween into a function

Recommended Posts

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 ?

Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

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?

 

Link to post
Share on other sites

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

Link to post
Share on other sites

- 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 :)

Link to post
Share on other sites

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

 

  • Thanks 1
Link to post
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.

×