Jump to content
GreenSock

Apekshit

Animation on scroll to shrink title and pin image

Recommended Posts

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 1107425859_animationframe1.thumb.png.d6ec8b1b52ff5e6e5876f64d3a237573.png
frame 2 1771920333_animationframe2png.thumb.png.67a44495ff87e2791a27bb6430a99a8d.png
frame 31260646379_animationframe3.thumb.png.aa55717c4de4e4866ad01af215eab8b5.png
frame 41702484261_animationframe4.thumb.png.1abc4ce10570b80677829e99f1746a82.png

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


 

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

@GSAP Helper I am really thankful for your help.

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

Something similar like this section
image.thumb.png.ac84be80abbf7b41090cb4287e8be099.png

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.

 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×