Kiran M

@GreenSock this is the one. Thank you. I had tried lot of iteration but no luck with final solution. Thank you again

Hi @GreenSock only yes block needs to show once right hand side image is fully scrolled to main-left block. Can you please refer to image 3 and 4, right now on scroll both yes block and image are transitioned simultaneously which is not the case

Hi, I will try to define my problem statement in following steps, I have uploaded the images as well for better understanding Main transition section (only left part) will scroll up and settle at top (pinned), please refer to step-1.jpg Right image will be scrolled up till left part, please refer to step-2.jpg and step-3.jpg When the above transition done, then "Yes, Hello" will appear at centre of the page, please refer to step-4.jpg one the "Yes, hello" appears then all these will scroll up together, please refer to step-5.jpg

Hello all, I am trying to create an effect like, First pinned the left description, till the image component (right side) is scrolled till the left component at top Then set opacity to 1 for "Yes, Hello" component, keeping the left and right component as it is till the opacity become 1 with duration set I am able to do the first transition but "yes, hello" block is scrolling before the first transition yet to complete, I have created the demo for reference. https://stackblitz.com/edit/stackblitz-starters-2yb1kq?file=app%2Fcomponents%2FMainTransition.tsx Thank you in advance

Thank you so much. I might need more help with my current project as it has lot of transitions, but will check once doing the same. For now working fine. Regards, Kiran M.

Hey, totally worked as per my requirements. Thanks. Can you please help me in code review as I am new to GSAP and update me I am implemented the requirements correctly also little bit confuse with weather it will work for all desktop sizes as I am using percentages for start and end Thank you again

Hi, Thanks, now first point is not working. Please check my demo in which it is pined till 2 lines of text block is visible.

Hi All, I am new to gsap and might need more help in number of different topics, currently I am struggling to create a smooth transition which will be similar on all desktop sizes, I have also created a demo for better understanding https://stackblitz.com/edit/stackblitz-starters-j1a8zt?file=next.config.js,app%2Fcomponents%2FImageContainer.tsx,app%2Fglobals.css Problem Statement: Background image needs to be fixed till from bottom 2 lines are not visible (In my case till "Hello There Lorem Ipsum is simply dummy text of the" which are mainly divided into two lines) then smooth scrolling will be enabled till the text block is at centre of the screen. Then keep the text block pined till background image fully scrolled vertically. Once background image is not in DOM, enable scrolling of text block Thank you in advance