How do I run my code (3d scroll) not from the beginning of the page, but when reaching the block in which the 3d scroll should work, and when passing this block, complete the code with a 3d scroll (taking into account high performance, no lags, and so on)

[Igor Cher 0 Likes (Newbie)]

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

See the Pen vYVejEd by raeqpzoz-the-lessful (@raeqpzoz-the-lessful) on CodePen

[Rodrigo 5,887 Likes (Superhero)]

Hi,

 

The main problem I see is this:

<section class="gallery">

  <div class="frame">
  </div>

  <div class="frame">
  </div>

  <div class="frame frame_bg">
  </div>

  <div class="frame"></div>

  <div class="frame">
  </div>

  <div class="frame frame_bg">
  </div>

  <div class="frame"></div>

  <div class="frame frame_bg">
  </div>

  <div class="frame"></div>

  <div class="frame">
  </div>

  <div class="frame frame_bg">
  </div>

  <div class="frame">
  </div>

  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame frame_bg">
  </div>

  <div class="frame frame_bg">
  </div>

  <div class="frame"></div>
  <div class="frame"></div>

  <div class="frame">
  </div>

</section>

See how many elements with the class frame you have in your HTML? Guess what happens when you run this code:

let frames = gsap.utils.toArray(".frame"),
    overlap = 5,
    time = 0,
    tl = gsap.timeline({
      defaults: {ease: "none", duration: 1},
      scrollTrigger: {
        trigger: ".containerr",
        start: "top top",
        end: "+=2000",
        markers: true,
        pin: true,
        scrub: 0.5,
      }
    });
frames.forEach((el, i) => {
  tl.fromTo(el, {opacity: 0, z: -2000}, {opacity: 1})
    .to(el, {z: 2000, ease: "power2.out"})
    .to(el, {opacity: 0,});
});

You're adding an instance to your timeline FOR EACH element with that class, even empty ones, that's why your animations are too fast. ScrollTrigger is just doing it's job, which is updating the timeline's progress based on the scroll position. The problem here is that you have created an extremely long timeline in a short scroll amount (2000 pixels). I strongly recommend you to re-think your HTML structure and class names for creating the GSAP Timeline in order to correct this. Also I recommend you to just create your GSAP Timeline instance first and then plug ScrollTrigger into the mix in order to first get your animation working the way you expect. Watch this video in order to get a better grasp of this concept:

Unfortunately we don't have the time resources to re-build your codepen example, eliminating every possible element that you don't want or need to animate, we'll leave that to you.

 

Hopefully this helps.

Happy Tweening!

[Igor Cher 0 Likes (Newbie)]

Thank you