Scroll zoom in change image and caption

[Sukru 0 Likes (Newbie)]

Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?

See the Pen JjOzRqR by sukruemanet (@sukruemanet) on CodePen

[Cassie 3,980 Likes (Superhero)]

Hey there @Sukru,

 

if you want to zoom elements in and out you'll need to use scale instead of autoAlpha (or in conjuction with)
 

//e.g

gsap.to('.elem', {
  autoAlpha: 0,
  scale: 0
})

gsap.to('.elem', {
  autoAlpha: 1,
  scale: 2
})

 

Hope this helps!

[Sukru 0 Likes (Newbie)]

11 hours ago, Cassie said:

Hey there @Sukru,

 

if you want to zoom elements in and out you'll need to use scale instead of autoAlpha (or in conjuction with)
 

//e.g

gsap.to('.elem', {
  autoAlpha: 0,
  scale: 0
})

gsap.to('.elem', {
  autoAlpha: 1,
  scale: 2
})

 

Hope this helps!

Hello Cassie thank you very much, i wonder if it is possible to implement it in codepen? i want to zoom in and out without opacity

[Cassie 3,980 Likes (Superhero)]

I'm not really sure which ones you want to zoom in and out I'm afraid.

But why don't you give it a go?

scale controls zoom and autoAlpha controls opacity.