De.Minov

@Rodrigo, Hello, so I managed to place the cards, but I encountered a problem: The cards should be positioned the same way, with equal spacing between them, but the starting position of the first card should be centered, while the others should be to the right of it. I tried adjusting the start parameter as followsstart: .5 + cardSpaceAround[index] But they are not positioned as desired. I am desperate, please help🥲 Demo: Codesandbox

@Rodrigo, thank you for the solution, but unfortunately, it doesn't work for me. The thing is, I might have a different number of blocks. In the beginning, the first element is in the center, the rest are arranged in an arc, with the direction of this arc either upwards or downwards. There can also be different actions: The first option is that with ScrollTrigger, these elements will shift to positions as in my codepen example. The second option is that there will be a slider. In the first case, there will be 4 elements within the visible area along this curve. And in the second case, there will be only 3 elements. I feel like a universal solution is needed, but I have no idea where to start, how to arrange them. I am more inclined to use MotionPath, but I don't understand how to position n number of elements from the center of the arc and then animate them along it.

Hello, I am trying to implement the appearance of cards using ScrollTrigger, they should appear from the right off the screen and move along an arc to the position they have in the example. I have been trying to figure it out on my own for a long time, find a similar case, and I eventually came to the conclusion that I can use the MotionPathPlugin, but it does not transform according to these values: const path = [ {xPercent: 15, yPercent: -15, rotate: -20}, {yPercent: -5, rotate: -10}, {yPercent: -5, rotate: 10}, {xPercent: -15, yPercent: -15, rotate: 20}, ] And in relation to the current element. I would be very grateful for a full help or a hint, at least on how to implement them off-screen first, and then each take their place. I think I can figure out how to attach this mechanic to ScrollTrigger on my own Thank you in advance!

I found the cause of all the issues... 🥲 The whole problem was that I had a useBreakpoint() hook, which was a dependency for useLayoutEffect() in the first component, but it was missing in the second one, which caused this problem. What a carelessness 🤦‍♂️ ---- Thank you all so much for your help! 🙏 The topic can be closed now.

Unfortunately, this doesn't help. It feels like the first component takes more time for calculations, and when it's done, the second component is already working.

There are two components: The first component uses pin, where the pin-spacing height equals the height of this element +=200%. The second component uses start for its trigger and gsap.from animation. When initializing the pin from the first component, it is given a new height, but the start/end positions of the second component are unaware of this, causing them to execute earlier. This is the main issue, and I couldn't find the correct solution to fix it. I created a minimal example, but for some reason, it doesn't work there 🤔

Yes, I think I will. Thanks for the help)

I tried to limit resize, but this is unnecessary, on the contrary, due to the constant change of `s1` (from the snippet), it is required to constantly "track" the size. As for the units of measurement, this is also not the case.. It seems to me that when refresh() is used, it is necessary to check where `start` is relative to the center of the screen and "send" it to the nearest "screen"

Basically, the problem is observed on mobile devices. Here is a video, from 15 seconds you can see how the trigger during the resize (due to the offset of the browser address bar) ignored the transition I wrote about (analogous to FullPage), which is why some animations related to the transition did not work and had to be scrolled "manually".

I apologize for the incomprehensible title, which is likely to mislead, but I do not know how to formulate it correctly. In general, I have a task to divide the page into "two screens", the first with a minimum height of `100vh`, while it can stretch in height. The second one can already be any height, but by filling the content it is still more than `100vh'. The transition between screens should be similar to FullPage Scroll plugins. In general, I have implemented what is required, but I ran into a problem on mobile devices (and sometimes it is reproduced when changing the size of the viewport on desktop). The problem is in the interface elements in mobile browsers, which are animated when scrolling and in fact trigger the `resize` event. And it happens that the scroll passes the trigger and one of the animations (goToPer, goToSec) does not work. And the question is, is it possible to somehow "flip" to the nearest trigger when refreshing, or to start an animation? ---- P.s. I read a couple of topics on your forum and took into account one of the moments with the imitation of `vh` via JS. She helped solve the problem with `refresh()`, thanks for that :)