PedroZorus

Hello Ali, thank you for your answer but I would like to favor a cleaner solution, without hotfix including `!important` which can cause side effects. If someone can explain me the Why of this bug in scrollTrigger and how to prevent it properly; and if my function to sticky till the page end is clean or if an alternative exists, I will appreciate.

Hello everbody, I'm trying to create a sticky effect with my logo. All is ok, but the pin-spacer auto-resize my element with the scrollbar size as right gap. I don't understand what I'm not doing correctly ?. Also, I want to get your advice about my function to made the logo sticky till the end of my page (In the codepen). It's a good practice or not ?

Hi, I'm back, I've followed your advices and solved my issue, it was about the default units of gsap was set to pixels and pass them to percent solved everything in addition to set "fromTo" tweens instead of "from" or "to" tweens and cherry on the cake, the timeline is now easily readable ! ? Now i just need to take care about others "left" unit values in my others tweens or it's possible to limit the propagation to a module ? ? I could otherwise redefine gsap.config with each function call ? https://codepen.io/Pierre-Darrieutort/pen/bGdxbvm?editors=0010

Hi, thanks of your answer and your time, I've followed your advices (and made a codepen demo https://codepen.io/Pierre-Darrieutort/pen/bGdxbvm?editors=0010) The problem is persistent after change my errors by your previous GSAP functions ? I still observing a bug when I resize my window to execute a second time my tween and if I refresh all is okay for the first tween and after one resize the same problem happens.

Hi, I meet a simple problem with a tween : when I execute a first time my tween and then resize my window, the tween is happens badly, but if I refresh my page everything works fine, I've searched on forums but I don't find expected results ? In a first time, I've thinked the problem was linked to my CSS properties but when GSAP tweening it uses pixels values, and that's my only clue to resolve the problem. Here, an attached minimal repository : https://github.com/pierredarrieutort/Jape/tree/minimal_repo_for_menu

- 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

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?

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 ?

Thanks you for all advices and explanations !

It's actually working with GSAP v2 (Here : https://codepen.io/Pierre-Darrieutort/pen/VwwQJRy) But after the font link removed with GSAP v3 (Here : https://codepen.io/Pierre-Darrieutort/pen/wvBKLoy), the console still write Invalid property ease set to power4.in Missing plugin? gsap.registerPlugin(). From the v2 pen to the v3 pen i've just changed the properties names like described in the documentation, i don't understand where is the problem from ?

Hello everyone, I've just upgraded my project to GSAP v3, but CSSRulePlugin doesn't works properly anymore. In a first time i've thinked that was a problem behin the CDN delivery but after few tests, i can't see where exactly is the problem. Below, the console warned me about stuff extends with CSSRulePLugin. Someone can explain to me what should i change to make it work ? Thanks you by advance !