Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sukru

Scroll zoom in change image and caption

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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