Can I add a pin function in the middle?

[kku98057]

Thank you For starters, always so much for your help too.

 

Just watch the mobile version.
Text animation will not start until the pin function is started.

But what I want is that the text in the first purple background is animated while scrolling down and then the pin is executed.

What should I do?

 

reference site

 

https://www.apple.com/kr/iphone-13/

It is located at the bottom of the site.

See the Pen zYpoKYN#unsupported-modal by kku98057 (@kku98057) on CodePen

[Cassie]

Hi there!

 

There's a lot of code here for a seemingly simple question so I'm struggling to understand exactly what it is that you're trying to do.

In terms of your question - You can pin and animate things separately. You just have to specify that, and place the triggers and start and end points in the right place for your use case.

e.g. (pseudo code)
 

// animate
gsap.from(text, {
  opacity: 0,
  yPercent: 60,
  duration: 1,
  scrollTrigger: {
    trigger: something,
    start: "top center"
  }
});

// pin
ScrollTrigger.create({
  trigger: container,
  pin: true,
  start: "top top"
})