Animation on scroll to shrink title and pin image

[Apekshit]

Hi,

I need help with animation on scroll to shrink title text on scroll and pin image over the title once text has shrunk.



the client has provided apple mac site as reference
 

Frame 1
frame 2
frame 3
frame 4

***please ignore created images using windows paint application***

 

See the Pen JjLbwmW by sonawaneapekshit (@sonawaneapekshit) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...please show me how to build it all" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

I'm not sure exactly what effect you're going for with the shrinking text, what the timing is supposed to be like, etc., but here's a fork that might serve as a jumping-off point for you: 

See the Pen YzaNyBq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've still got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Apekshit]

@GSAP Helper I am really thankful for your help.

Reference link: https://www.apple.com/in/imac-24/

Something similar like this section


I want to achieve animation similar to this section. but my pinned image moving with scroll and i am stuck and don't know how to proceed

Can you provide me with guidance for achieving this animation effect?

Thank you so much for your guidance help.

 

[Cassie]

To pin an image you can use 'pin'

https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin

Why don't you give it a go?

[Apekshit]

@CassieI have updated the code but the pin should start once the text has shrunk and the pinned image should be over the shrunken text.

[Apekshit]

I have kind of achieved it.

See the Pen rNdjLVd by sonawaneapekshit (@sonawaneapekshit) on CodePen