Daniel Matt

I think I found the issue the problem is appearing when I have the CSS property scroll-behaviour: smooth. html { width: 100%; height: 100%; box-sizing: border-box; scroll-behavior: smooth; scroll-padding-top: 80px; } Can you see the problem with that? I suppose that causes the problem with that loading position on the scroll.

I have prepared 1 more codepen wher I have only pinned left and right column. The image above should scroll normal. The ScrollTrigger should only work for desktop design. https://codepen.io/Matteokr/pen/ExzyEpy All works well when I load a page from the top (scrollTop = 0). But, when I scroll my page to any section below the animated section (for example to Section 5) and then try to reload the page, when I scroll up to see the animation, there is a huge gap between the animated columns and the image above. Also, both columns are not animated.

Thank you it is a great solution. I modified your code and added a fixed header and padding top for the <main> element. https://codepen.io/Matteokr/pen/ExzyEpy I would like make 2 more amends: - the image will be visible a little when I have fixed header - with the left column I would like that always be below the image when scrolling (keep all time the same gap for example 50px) and lock when the image will be locked at the top - the behaviour of the right columns is correct Should I add any gsap animation to the left column? How to achieve that image and left column will move exactly the same amount of px together?

I have a layout that includes a full-width image and below 2 columns with text. 1. In the beginning I would like to hide text columns, so it is something like an image covering the whole text in the viewport. https://prnt.sc/qMmbPSGgazwy 2. When you start scrolling the image moves up (like a normal scroll) and then uncovers the "fixed" lext column. https://prnt.sc/DsNgwu3TfMla https://prnt.sc/ITl-ejbnOFfR 3. When I scroll enough, I have a gap between the image and the left column. I would like to lock the position of the image (so it is a little) visible above the left column. https://prnt.sc/BhYYBCI0WsHM When I scroll more, then it will appear scrolling the right column up. The right column will be moved up as long as reaches the left column top. https://prnt.sc/PUsj_YQneNCV 4. After reaching the position, then it will start in the normal scroll. I tried a few methods with sticky, fixed positions, but I stuck with that. Any help here?

I have 1 more question, When I pin scrollTrigger with 2 and more elements (preparing for making a slider), then the pin div wrongs calculate for transtaion, and my animation is not visible. Any idea how to fix it? https://codepen.io/matteokrr/pen/jOQGYYG

I'm using a Lottie animation with the ScrollTrigger. I would like to have a fixed position in the center of the viewport as long as I reach the destination. The orange rectangle is the place where I would like to stop the Lottie element. How can I achieve it with "pin" settings on the ScrollTrigger?

Hi, Thanks for the tips. Could you tell me what I'm doing wrong with width animation: https://codepen.io/Matteokr/pen/RwRdway I would like to change width 33.3% to 66.6% when open/close (click) item. Only 1 item might be open. I think something wrong goes with the gasp.set() width and height. Also is there way to use CSS properties: flex: 0 0 33.3%; max-width: 33.3% instead width property (see CSS comment lines)?

Thanks for the quick reply. According to the related topics I built the example below. How can I animate the box width? Is there option that the 3rd, 6th, 9th, etc. width goes animate from right to left? Also when I click 3rd element, that looks all "jumping" for a second. Any idea how can I make some improvements in my code. https://codepen.io/Matteokr/pen/jOrdKGX

I used flexbox to build 3 column layout (now it contains 9 tiles). Each tile has 33.3333% width. When you click on the tile, then it will be extended to 66.666%. So we have the grid as in the example below: (A) In the beginning, all tiles are closed. Each tile has 33.3% width. (B) After click 4th element (an also another elements from column 1), the 4th element will be animated from left to right (width: 66.6%). All elements after clicked item moves right 1 column. (C) After click 5th element (an also another elements from column 2), the 5th element will be animated from left to right (width: 66.6%). All elements after clicked item moves right 1 column. (D) After click 6th element (an also another elements from column 3), the 6th element will be animated from right to left (width: 66.6%). The previous item (in example 5th will go to the next row). All other elements after clicked item moves right. To summarise, each clicked element stay on the same row (initial position row) and can move elements before/after to the next row. I suppose that might be connected with the "order" css property row. I would like to make a nice animation with changing tile width and the effect if we move tiles position. Do you have any idea how I can achieve it?