Jump to content
Search Community

Use ScrollTrigger to keep element in place while viewport changes height

jamis0n test
Moderator Tag

Recommended Posts

I have a web app that uses framer motion to animate the height of several elements when the expand/collapse.

 

I'm wondering if I can use ScrollTrigger to "pin" the top center element in the viewport so that as the height of elements changes above it, the top center visible viewport element doesn't get lost.

 

I've looked at the pin API, but in my case, another JS framework is changing the height of the element, and I want to programatically tell ScrollTrigger to keep a certain element in place.

 

 

Link to comment
Share on other sites

  • jamis0n changed the title to Use ScrollTrigger to keep element in place while viewport changes height

Hi @jamis0n,

 

I'm not sure if I follow what you're trying to do. Can you please provide a minimal demo of what you're trying to do? No need to include all the framer and react stuff, just the specific outcome you're trying to achieve in a simple way.

 

Keep in mind though that altering the height of the main container will not trigger a ScrollTrigger refresh, will affect the perceived position where ScrollTrigger will start/end the animations associated with it's instances, as those calculations were made with the original screen height.

 

Happy Tweening!!!

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.
×
×
  • Create New...