Jump to content
GreenSock

rexbradford

Trying to use ScrollTrigger to scale down a full screen image and have the content below move up in sync

Go to solution Solved by Cassie,

Recommended Posts

In the attached codepen I'm trying to get the full screen image to scale down on scroll, which does work, but I can't seem to get the content below the image to sit directly below the image after the scale has happened. I've tried playing around with pinSpacing but this doesn't seem to resolve the problem. Any help is much appreciated as I've been playing around with this for what seems like hours to no avail.

See the Pen NWYEzBv by rexbradford (@rexbradford) on CodePen

Link to comment
Share on other sites

  • rexbradford changed the title to Trying to use ScrollTrigger to scale down a full screen image and have the content below move up in sync

Heya - well, it won't flow directly underneath because there's blank space that was filled by the image.

It's nothing to do with pinSpacing, the space is just where the image *was*

Link to comment
Share on other sites

Thanks for your swift comment Cassie. I thought that might be the case but wondered if there was a way to programmatically/dynamically  remove that white space whilst scrolling. No easy solution I guess.

Link to comment
Share on other sites

Brilliant Cassie. Animating 'from' instead does the trick! A few little tweaks and it's doing exactly what I wanted it to. Thanks for your help.

  • Like 1
Link to comment
Share on other sites

Glad to help!

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