Need help with positioning Image on scroll at specific point

[Raju Bhai]

Hi Gsap team,

                 Your library is awesome, so I have created a minimal demo that I need your help with, I'm no expert in gsap, but the issue that I'm facing is as,

 

I want to stop that Big G Image ( coming from top background bottom ) where it is stopping currently in the demo. But for this what I have done right now is added the fixed Y value, that fixed Y value is making it to stop where I want it to, but if I add more content in that About section ( red section ) then the Y fixed value is not a suitable option and stopping that G image before the intersection point of 2 sections ( due to fixed Y value I added ), so I want Y to be calculated dynamically, so that it stop in the same position where it was stopping with fix value of Y I have given.

 

So in brief I want that G to be stopped in the middle of two sections intersection point so that image is at 50% in the middle of intersection point , please see screenshot link

See the Pen vYoyqxM by Rajender-Verma (@Rajender-Verma) on CodePen.

[Raju Bhai]

43 minutes ago, Raju Bhai said:

Hi Gsap team,

                 Your library is awesome, so I have created a minimal demo that I need your help with, I'm no expert in gsap, but the issue that I'm facing is as,

 

I want to stop that Big G Image ( coming from top background bottom ) where it is stopping currently in the demo. But for this what I have done right now is added the fixed Y value, that fixed Y value is making it to stop where I want it to, but if I add more content in that About section ( red section ) then the Y fixed value is not a suitable option and stopping that G image before the intersection point of 2 sections ( due to fixed Y value I added ), so I want Y to be calculated dynamically, so that it stop in the same position where it was stopping with fix value of Y I have given.

 

So in brief I want that G to be stopped in the middle of two sections intersection point so that image is at 50% in the middle of intersection point , please see screenshot link

one more thing I forgot to mention is I want G to animate start on scroll like it is right now, which is from bottom touching the screen but then stop at the point like I mention, please let me know

[mvaneijgen]

Hi @Raju Bhai welcome to the forum!

 

First of check https://gsap.com/resources/mistakes/#using-css-transitions-and-gsap-on-the-same-properties you have a lot of transition: all; in your CSS. You should never target 'all' properties in CSS and just target what you want to transition and more important you should never transition something that GSAP is animating!

 

I've removed most of your logic to just focus on the issue at hand. You want your G element to sit in the bottom of .home-about, so you need to get its height (this block has a padding, so you need to include that. (It seems with jQuery you do that with .outerHeight()) then we need the height of the G and then get half of that to move it back up the half of its own height. As you can see in the pen that is still not fully correct, so you need to do some more math or alter the image so that the space you want to line up is in the middle of the image. If you don't want to alter the image you have to figure out how much the offset needs to be, lets say on the current scene that is 40px you then have to calculate how much percent 40px is compared to the full height of the G and then add that percentage back in to the calculation, this so that it works on all screen sizes.

 

When you've got everything lined up you can enable your animation again but instead of a .to() you use a .from() some location an then it will animate perfectly to the spot you've set it on page load. 

 

Hope it helps and happy tweening! 

 

See the Pen LYwxYJa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Edit: Did some math and it seems the magic number is 5.13%, so if you subtract that from the current calculation it perfectly lines up again hope it helps and happy tweening! 

 

See the Pen YzmNzmz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Raju Bhai]

Hi @mvaneijgen

         Thanks for the response, but still it didn't resolve my issue, I want that G image to start scrolling with that G image bottom touching the screen bottom like in my demo, and then stop it like you did that actually, anything that I need to do in this ?

[mvaneijgen]

I'm not sure what it is your asking. My demo does exactly what your demo does, without the fixed values. 

 

Can you maybe explain what it is doing now and what you want it to do, eg: 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

 

 

[Raju Bhai]

please find the screenshots in sequence what I meant actually.

 

Screenshot_1 : when I start scrolling and as soon as red section is visible the G image starts moving ( G image bottom touching the screen bottom, mean moving along with scroll )

 

Screenshot_2: Still image is moving with screen bottom, that is happening in my demo.

 

Screenshot_3: where it needs to stops finally and then on scroll back start from that stopped point.

 

as with fixed value I am able to do like in my demo, but if content is more then it don't sits where it is now in screenshot_3

 

Sorry if was unable to explain clearly, hope these screenshots will help you understanding,

[Rodrigo]

Hi,

 

Unfortunately this is more about the math side of this than a GSAP related issue. Check this video:

https://i.imgur.com/M1wk6Fg.mp4

 

As you can see as the window size changes, so does the part of G image where the animation should stop. What you have to do is find the math combination that achieves the effect you're after. For that you have to take into account the height of the image, the height of the sections involved, maybe the height of the browser window as well. Then based on the natural height of the image find the actual percentage of that particular height where the horizontal line of the G letter is considering the total height of the image and with that percentage find a dynamic math that achieves that effect.

 

This is beyond the help we provide in these free forums, since we don't have the time resources to provide free general consulting or solve complex issues or create complex solutions/logic for our users. You can post in the Jobs & Freelance forums in order to get help there.

 

Sorry I can't be of more assistance 😞

[Raju Bhai]

hi,

 

 

      Thanks guys, and no problem, really appreciate your help on these though guys,