Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shahas Nizar

Scale multiple elements when pinned

Recommended Posts

Hello,

 

I have a series of image that get pinned on after another.

I would like to make the images pinned and scale while scrolling

 

It seems that the image is pinned during the whole duration of the timeline, but scaling for each image is not working as expected

 

For eg: i need all images to scale down from 2 to 1, 

 

So please help me to transform each images individually after it's get pinned.

 

 

Please have a look at this demo

 

!Sorry my bad english :-)  

 

Big thanks for this awesome plugin :)

See the Pen KKvOReo by shahas-nizar (@shahas-nizar) on CodePen

Link to comment
Share on other sites

1 hour ago, OSUblake said:

Hi @Shahas Nizar

 

You should start out by getting rid of the ScrollTriggers inside your timeline. There should only be 1 ScrollTrigger associated with a timeline. Check out the Most Common ScrollTrigger Mistakes

@OSUblake Thank u for quick response

 

As u stated i think i have managed to make it in a single ScrollTrigger, but still i'm unable to find the desired output. 

 

Pinning for the parent element works fine but only last child element is transforming

I tried with forEach method for child elements (.panel-bg) but still not working could you pls help me with this..

 

demo updated : 

See the Pen KKvOReo by shahas-nizar (@shahas-nizar) on CodePen

Link to comment
Share on other sites

Now you just need to construct your timeline. I think it's easier to make sense of what's going on by not including ScrollTrigger at first. Just make your timeline, and once it's animating correctly THEN hook it up to ScrollTrigger.

 

See the Pen vYJovOo by GreenSock (@GreenSock) on CodePen

 

 

Link to comment
Share on other sites

9 hours ago, OSUblake said:

Now you just need to construct your timeline. I think it's easier to make sense of what's going on by not including ScrollTrigger at first. Just make your timeline, and once it's animating correctly THEN hook it up to ScrollTrigger.

 

 

@OSUblake You helped me almost

 

But what i want to achieve is to scale down the child elements (.panel-bg), not the parent one.

 

Each child element should transform while its parent div gets pinned by ScrollTrigger.

 

or please advise me if timeline is the correct method to achive this

 

9 hours ago, OSUblake said:

 

 

 

Link to comment
Share on other sites

Then you would select the panel-bg. It's still going to be a timeline.

 

gsap.utils.toArray(".panel:not(:last-child)").forEach((panel, i) => {
    
  tl.to(panel, {
    yPercent: -100,
    ease: "none"
  }, ">")
  
  tl.from(panel.querySelector(".panel-bg"), {
    scale: 2
  }, ">-0.5")
});

 

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