scale image and scroll the image

[Sijo]

Hello GSAP community,

I'm working on a sophisticated scroll-triggered animation sequence and could really use some expert guidance. I'm trying to achieve a multi-step effect involving an image, a subscription section, and an onboarding section.

Here's the exact sequence I'm aiming for:

1. Initial State (Hero Section):

   • An image (let's call it the "Banner Image") starts in the hero section.

   • As the user scrolls down, this Banner Image should initially move/translate along with the scroll.

2. Transition to Subscription Section (subscription-section-wrapper😞

   • When the user scrolls and the subscription-section-wrapper comes into view (or at a specific scroll point related to it), the Banner Image should then pin behind this section.

   • Simultaneously, or shortly after pinning, the content within the subscription-section-wrapper should fade out and move to the left, revealing more of the pinned Banner Image behind it.

3. Image Scale-Up and Onboarding Content Reveal:

   • As the user continues to scroll past the faded-out subscription content, the now pinned Banner Image should begin to scale up.

   • While the Banner Image is scaling up, or immediately after it reaches a certain scale, the onboarding-card-container section should animate in from the bottom, appearing over the scaled Banner Image.

My main challenges and questions are:

• Orchestration: How do I best orchestrate these multiple, dependent animations with ScrollTrigger? Especially the transition from the image moving with scroll, to pinning, to content fading, and then the image scaling up while a new section appears.

• Pinning & Overlap: How can I ensure the Banner Image pins correctly behind the subscription-section-wrapper and then scales up smoothly as the onboarding-card-container appears over it?

• Trigger Points: What's the most robust way to define the start and end points for each phase of this complex timeline to ensure seamless transitions?

I've prepared a CodePen to illustrate the structure of my HTML and CSS, and where I'm attempting to implement these animations. Any starting points, architectural advice, or direct examples would be incredibly helpful!

See the Pen yyYYdXG by AlphaCare (@AlphaCare) on CodePen.

Edited July 18, 2025 by Sijo
codepen link updated

[Rodrigo]

Hi,

 

Your demo is not working, it's erroring out at this point:

if (!polygon || !mainContainer) {
  console.error("GSAP elements not found. Please ensure 'myPolygon' and 'mainContainer' exist in your HTML.");
  return;
}

Without a demo that clearly illustrates the problem that you're having is really hard for us to provide any help.

[Sijo]

Hello,

Yes, I see the problem! I’m sorry for saying this; the CDN links for GSAP and ScrollTrigger were indeed absent in the CodePen, which created the problem. I added both links, along with the necessary HTML elements. 

Now that the error message has been resolved, I am still thinking about how to properly synchronize the intricate animation sequence: an image scroll, content pinning, fading content, scaling the image, and making a new section appear. It would be really useful if I could get any suggestions on structuring this! 

Thank you!

[Rodrigo]

Hi! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you.

 

Finally I don't see a simple way to achieve this based on the sequence description you provided and the layout you have, this is the best and simplest approximation I can come up with the time I have, using Flip, GSAP Context and ScrollTrigger:

See the Pen YPywwYL by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!