Igor Cher

You surprised me a lot! I took these files from a video tutorial on using gsap ScrollSmoother from YouTube. I didn't know that these files were somehow modified to circumvent your license agreements. I will, of course, delete them. I just went to the gsap club page. As far as I understood from there, I can use the club's plugins (including ScrollSmoother) for free, if I do not need a commercial license (for example, I wanted to use this plugin for educational purposes). But I didn't really understand how to join the gsap club in this way. And you're saying that I'm not in this club. I would be grateful if you could explain to me if I can use these plugins for free (for educational purposes). And if so, how can this be done?

I tried adding the DOMContentLoaded event, as well as moving the script connection from the head tag to the bottom of the document (before the closing body tag). Unfortunately, none of these methods helped to solve the problem...

The essence of the problem: when using gsap ScrollSmoother, when scrolling the site, the content of the site remains in place, and the site slider itself (on the right) scrolls. I attach a link to the problematic site on github: https://igcheer.github.io/fyrre/

And how can I fix the problem with a non-working scroll?

Hello. I have a web site in html, css and js. I am connecting gsap and ScrollSmoother files locally to my project. The problem is that in this project, when scrolling the page, the content remains in place, and the scroll slider on the right side of the page moves. I connected gsap and ScrollSmoother in the same way and with the same js settings to my other project, and in another project everything works fine. I checked in my working project, and there the transform: matrix3d() property is added to the "content-scroll" class (this is the content inside the shell) in addition to other properties from ScrollSmoother, and when scrolling the page, the value of this property changes. And in my broken project, all the necessary properties are added to both the "wrapper-scroll" class and the "content-scroll" class, but the transform: matrix3d() property is not added to the "content-scroll" class. I have attached for your convenience a link to codepen.io , but there is no way to connect library files locally. I also attached the files of my project (html, css and js), where this problem is just completely clear. Please take a look at the attached project files and help fix this problem. That is, most likely, some css property in my code breaks the gsap ScrollSmoother functionality. I can't find out exactly where the cause of this problem is. Please help me. I will be very grateful

Hello. For some reason, it is not possible to connect the gsap library and the ScrollSmooter plugin to your Gulp + Webpack build. I do everything according to the instructions from your site: I join the gsap club for a free tariff plan, give up the commercial license (because I want to try the plugin for educational purposes), install the library via npm (npm install gsap-trial), connect to my project as follows: import { gsap } from "gsap-trial"; import { ScrollSmoother } from "gsap-trial/ScrollSmoother"; Next, I prescribe the settings as follows: gsap.registerPlugin(ScrollSmoother); ScrollSmoother.create({ wrapper: '.wrapper-scroll', content: '.content', smooth: 1.5, }); As a result, nothing works for me, and the following errors appear in the browser console: Uncaught Error: Cannot find module 'gsap-trial/ScrollSmoother' at webpackMissingModule (modules.js:1:8) at ./src/js/files/script.js (modules.js:1:8) at __webpack_require__ (bootstrap:24:1) at fn (hot module replacement:62:1) at ./src/js/app.js (log.js:81:1) at __webpack_require__ (bootstrap:24:1) at startup:6:1 at startup:6:1 webpackMissingModule @ modules.js:1 ./src/js/files/script.js @ modules.js:1 __webpack_require__ @ bootstrap:24 fn @ hot module replacement:62 ./src/js/app.js @ log.js:81 __webpack_require__ @ bootstrap:24 (анонимная) @ startup:6 (анонимная) @ startup:6 index.js:493 [webpack-dev-server] Errors while compiling. Reload prevented. logger @ index.js:493 (анонимная) @ index.js:634 error @ index.js:156 errors @ index.js:280 (анонимная) @ socket.js:62 client.onmessage @ WebSocketClient.js:45 index.js:493 [webpack-dev-server] ERROR in ./src/js/files/script.js 8:0-59 Module not found: Error: Can't resolve 'gsap-trial/ScrollSmoother' in '/Users/i.cheernyshov/Desktop/Fyrre/src/js/files' Did you mean 'ScrollSmoother.js'? BREAKING CHANGE: The request 'gsap-trial/ScrollSmoother' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. logger @ index.js:493 (анонимная) @ index.js:634 error @ index.js:156 errors @ index.js:289 (анонимная) @ socket.js:62 client.onmessage @ WebSocketClient.js:45 favicon.ico:1 GET http://192.168.0.103:8080/favicon.ico 404 (Not Found) index.js:485 [webpack-dev-server] App updated. Recompiling... index.js:493 [webpack-dev-server] Errors while compiling. Reload prevented. logger @ index.js:493 (анонимная) @ index.js:634 error @ index.js:156 errors @ index.js:280 (анонимная) @ socket.js:62 client.onmessage @ WebSocketClient.js:45 index.js:493 [webpack-dev-server] ERROR in ./src/js/files/script.js 7:0-59 Module not found: Error: Can't resolve 'gsap-trial/ScrollSmoother' in '/Users/i.cheernyshov/Desktop/Fyrre/src/js/files' Did you mean 'ScrollSmoother.js'? BREAKING CHANGE: The request 'gsap-trial/ScrollSmoother' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. Please help me connect the library and plugin to my project correctly so that everything works. I will be very grateful.

Thank you

Hello. Now I will describe the essence of my problem in as much detail as possible. I attach a codePen link to 2 codes in HTML, CSS and JS. The first code is active, the second is commented out (inactive). In the first (active) code, I have blocks (3 blocks) with a lot of text. Next comes a block of code called "containerr", in which a 3-d scroll is performed (as if inside the page). CSS styles and JS code, which is responsible for the implementation of 3d scrolling, are also prescribed for this html markup. The problem with this code is that the 3d scroll starts working from the very beginning of the page, and I need it to start working exactly from the moment when the user scrolls to the "containerr" block, and when this block ends, the 3d scroll code should finish its work and disconnect. This is only the first part of the problem. Earlier I wrote to you on this issue and they were really able to partially help me: they optimized the js code using gsap scrollTriger so that everything started working as it should (when the scroll reaches the desired block). It is this solution, which only partially helped, that I also attach with the same link to codePen: commented out (inactive) blocks of HTML, CSS and JS code after the active blocks. Let's go back to the active block of HTML, CSS, JS code. If you delete the initial three blocks with text in this HTML structure: "block-1", "block-2", "block-3", and run the code, you will see what effect of scrolling I want to achieve (this is necessary for comparing the scroll in the first and second cases). At the same time, the problem of 3d scrolling from the beginning of the page still needs to be corrected to the beginning of the 3d scroll from the "containerr" block, if there are any other blocks in front of it. The fact is that I need to achieve exactly the same 3d scrolling effect as in the first code example. If we compare the implementation of my 3d scroll code and your colleague's code (the code below is commented out), then there are a number of very significant problems: 1. If for some reason the user scrolls the 3d scroll very deep down, and then abruptly returns to the top, then the page elements begin to hang and podlagivat (especially noticeable if you try to do it several times). There was no such problem in my code implementation. 2. Also, please compare the proximity of the text hitting when scrolling: in my case, the text does not approach close to the screen, but darkens and disappears a little earlier. In the example of your colleague, the text gets as close as possible to the reader, which is why the font quality is lost, and the load on the system increases. 3. Also in my example, in addition to the text, photos are attached (I didn't find how to attach them with a link in codePen, but you can trust me that even when taking photos into account, there are no lags in my code, while in your colleague's example, lags are already noticed with a small amount of text, without photos). 4. It is also very important for me to keep the very animation of the scroll hitting the user: part of the content "floats onto the user" directly, and the other part, which is located on the right and left sides, float away as if on the sides, leaving a small distance between them in the middle of the screen (it is very important for me to keep the animation as similar as possible 3d scrolling). I will summarize the essence of the problem more briefly: 1. It is necessary that the 3d animation of the scroll begins to act not from the very beginning of the page, but when reaching the desired block (in this case, this is the "containerr" block). 2. It is necessary that this 3d scroll animation loads the system minimally and does not lag (in my implementation I managed to do this, but it did not work out at the same time to start the animation from the desired block). 3. It is important that the very essence of the animation remains as similar as possible to the one I implemented in my example. Please help me solve these problems using gsap scrollTriger, I take into account the described nuances. I have attached two types of code so that you can compare them and understand what I mean. To view the animation that I want to achieve, delete three blocks with text in the first html code (otherwise it will work incorrectly due to the problem of starting scrolling from the topmost position of the page). I really hope for your help. I was almost desperate. You really were able to help me in part for the first time (but I may not have described my problem with all the details). Now I have described the problem in as much detail as possible, with examples and different codes. Please help me solve this problem. This is really very important to me

Thank you very much. This is really the result I was trying to achieve. But, unfortunately, this method has very low performance and when scrolling the page back (from bottom to top), a very strong frame loss and very strong lags are obtained. I will try to create a new question on the same topic, but with a more specific example. I believe that you can help me.

I have a "container" block in my project (it is located at the end of the page), which implements a custom Z-axis scroll. The problem is that the code starts firing from the very beginning of the page, while I need it to start firing specifically for the "container" block. And when passing the "container" block, the code should stop working. Tell me how to implement this functionality using gsap scrollTriger?

Hello. I am currently creating a website that has several sections. At the same time, the scrolling on the initial sections is normal (from top to bottom), and on one of the sections I want to make a scroll that will be made as if inside the page (a kind of 3D effect). Also, I have already written the code that will be responsible for such an animation. Question: how to use "gsap scrollTriger" to start this animation when the site is scrolled to the desired section (with this animation), and also at the end of this section with the animation "deep into" the site to switch the scroll to the lower sections again to normal (from top to bottom)? I would be very grateful if you could tell me how to implement this functionality