Daniel Matt

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?