Share Posted March 15, 2020 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
Share Posted March 16, 2020 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. 2 Link to post Share on other sites
Author Share Posted March 16, 2020 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
Share Posted March 16, 2020 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
Author Share Posted March 16, 2020 - 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
Share Posted March 17, 2020 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, // ... 1 Link to post Share on other sites