ScrollTrigger Scrolling Element to a speicifc position

[SaifUllah]

Hello everyone,

I'm trying to move the globe/earth Image under the hand of the Lion (you can see the image below), but it is not getting responsive, I've used the MatchMedia as well but still having issues, is there any way or technique which I can use to make it perfectly responsive and move to that specific position?

I would greatly appreciate your help.

 

See the Pen LYMNqYj by saifullahbutt85 (@saifullahbutt85) on CodePen

[Rodrigo]

Hi,

 

Maybe this example can be a good starting point:

See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[SaifUllah]

Hello @Rodrigo Thank you for your response, I'm trying to implement it, but seems like I'm doing something wrong, could you please check and help? Also, Flip is not what I need, I guess.

[alig01]

Hey,

 

maybe another approach would be to control the Flip animation using ScrollTrigger? I have never tried it before, but it sounds doable since Flip.from() returns a timeline.

See the Pen VwqaRyZ?editors=1010 by alig01 (@alig01) on CodePen

In some cases it's a little jittery (not sure if I have already fixed the mistake) and when reloading the planet is missing, but for demonstration purposes it should suffice.

 

However, you should definitely do some research in the documentation, forum or examples and look for improvements.

 

Hopefully this helps and good luck with your project.

[SaifUllah]

Hi @alig01, Thank you for a quick demo, seems like it does the job, all though I found out another pen which does the same and worked for me, Thanks.

Here's the Pen which helped:

See the Pen gOZrEZL by saifullahbutt85 (@saifullahbutt85) on CodePen