shikari

@lumuxd

Hi @lumuxd. Did you manage to solve your problem?

@GreenSock, so in theory I can wrap my website in this helper function to adjust scroll behavior? I wonder if it causes big performance subsidence. What do you think?

Hey, @Cassie. Thank you for help here. I like the way your version works, but even though it looks more compact, I can't figure out the way all parts work. I will try to explain step by step and asking you to correct me if I'm wrong. 1.yPercent: -100 * (items.length - 1). This is what's happening on each scroll(snap). Transforming current item 200%(if we have 3 items) up by Y axis (I don't understand why 200 instead of 100); 2.Ease is clear 3.trigger is place where animation should start (depends on start and end). 4.pin: animatedPart. animatedPart gets pinned. 5.start: 'top top', end: `+=${itemContainer.offsetHeight}`, I assume we indicate what length our animation will take and I can indicate end as +=300% if I want to, instead of container height. 6.Scrub is clear 7. Snap is the hardest part for me?. Value is 0.5 in my case, therefore it has two points: 50% and 100%(as far as I understand). In my case I want to have 3 snaps: 33%, 66%, 100%(for each item), start it when bottom of the viewport touches top of our trigger and if I go from the very bottom- when top of the viewport touches bottom of the trigger. Is that possible or I misunderstand the way it works?

I use windows 10 and chrome. My colleague also says it doesn't work smooth in safari. Unfortunately I can't test it in safari

@GreenSock, Here I tried to record the issue. Video link. My goal is to snap to closest section when you reach a specific part of my website. Together with it I want to pin image on the right side of this part, which would change image together with sections snapping.

@GreenSock, I decided to use current approach with your scrolling object, which fixed jumping problem, but one problem is still there. Right part image which got pinned sometimes jittering as well. Do you know what the problem is and how to solve it? https://codepen.io/lElfenLiedl/pen/bGrQper

Thank you for your answer. I will create a minimal demo and get back to you.

Thank you, this works fine now, except for the right part image, it jittering sometimes. The scrolling object looks a bit complicated, though.Is there a better way to achieve this animation without scrollTo? I tried accomplish it with snap property in ScrollTrigger, but it didn't work as needed

Hi. Having this demo as a reference and I wanted to create something similar but faced with issue when scrolling between jumping sections. When I give just one scroll it goes smooth to the next part, but if I want to go faster and scroll multiple times it's twitching and right side image flashing. This also happens in demo example but not so noticeable. I can't figure out how to fix it. Please, help me out with it. Thanks in advance.

Hi @Théophile Avoyne. Could you please provide your final piece of code in react that is related to animation? I have just one ScrollTrigger instance that get initialized at the wrong time similar to what's happening on your first video and calling refresh doesn't help. The only thing which helps is setTimeout P.S resizing the window fixes the problem. Start marker moves to the right position on the page

@Théophile Avoyne, did you manage to solve your problem?

Thank you I will follow your recommendations and get back to the forum if I get stuck

Hey. I have the desired animation on the left but I also want to stick the image on the right down along all sections. As for now it works only along the first section, even though trigger is the whole wrapper. Could you help me with proper implementation? Also I would appreciate hearing feedback regarding the whole animation. I feel it's quite trashy and needs improvements

@ZachSaucier, seems I reached the desired behavior with text on the left side but I'm not quite sure how to bind the right side image to pin it all the way down along the left side. Could you give me a tip? https://codepen.io/lElfenLiedl/pen/WNoxjKY