GSAP / ScrollMagic How to implement such a slider / scene?

  • 0
    Good day! You need to implement a slider like this https://drive.google.com/file/d/1vQy5BA_RY1u4EITYK. .. . However, while the render appears to fill the entire screen, it is actually not. You just need it to grow a little and have a fixed size, for example 1280x700.

    I have never done such complex animations, and the task had to be done yesterday.

    At the moment, the problem is that I need to increase the height and width when entering the slider area, and when I exit, reset it, and when I return, I need to repeat it (namely, increase), and not scroll back. At the same time, I can't just toggle, since the increase should be tied to the scroll.

    https://codepen.io/glem1337/pen/bGeGLWY?editors=1000

    Also, I cannot figure out how to remove the air under the block in such a way that the scrolling remains, but the block is visually located next to the content.

    Questions:
    1. I am currently using GSAP only. To implement such a slider, will it be enough for me, or do I need to connect ScrollMagic as well?
    2. What approach / property can I use to increase the block upon entry, reset it at the end, and increase it upon return, and eventually reset it at the end, rather than play the animation in the opposite direction? The video shows what I mean.
    3. What approach / trick can be done so that the block is visually next to the content and there is no air under it? In this case, scrolling should be.


    UPD: I think I figured out how to remove the air. https://codepen.io/glem1337/pen/bGeGLWY?editors=1000
    UPD2: So far it has been done like this https://codepen.io/glem1337/pen/bGeGLWY . Questions 1 and 2 remained relevant.
    JavaScript Xavier Lynn, Feb 4, 2019

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!