Jump to content
GreenSock

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

GSAP ScrollTrigger

Go to solution Solved by OSUblake,

Recommended Posts

Link for code: https://codesandbox.io/s/globe-static-0m8517?file=/index.html

Link to sandbox viewing area: https://0m8517.csb.app/

 

Hi there,

 

I hope everyone is well.

 

I was wondering if somebody may be able to point me in the right direction for an effect I'm trying to achieve. Essentially, on the link above (best if opened in full-screen mode), you can see a globe, and then some text beneath it. What I want to achieve is for the text below to change as the user scrolls, but for the globe to stay pinned / fixed. I have achieved this somewhat in the above, but when the height of the content changes, the effect is quite jarring. 

 

Does anybody have any ideas of how I can get around this, so that when the text content beneath changes in height, the globe doesn't jump up and down? 

 

Furthermore, and this may not be possible, but is there a way to still have items pinned if the content overflows the height of the screen? I don't necessarily know how high the content may be in this example, but if it is longer, it overflows the screen -- and because we're pinning the items, you can't scroll to see it...

 

Any help would be greatly appreciated!

Link to comment
Share on other sites

  • Solution
3 hours ago, Jaron said:

Does anybody have any ideas of how I can get around this, so that when the text content beneath changes in height, the globe doesn't jump up and down? 

 

It looks just like a CSS issue. Changing the display from none to block is changing the height, which is causing the shift, so you may want to consider absolute positioning your text items and possibly the globe.

 

3 hours ago, Jaron said:

Furthermore, and this may not be possible, but is there a way to still have items pinned if the content overflows the height of the screen? I don't necessarily know how high the content may be in this example, but if it is longer, it overflows the screen -- and because we're pinning the items, you can't scroll to see it...

 

No, that's really not possible because the whole point of pinning is prevent items from scrolling. Again, this is more of a CSS issue. If I were super concerned that everything wouldn't fit on the screen, I would manually calculate the size of everything and dynamically position to where it would fit.

 

Link to comment
Share on other sites

Yeah, you're right, this more of an issue to resolve with CSS as it is something specific to ScrollTrigger, and absolute seems the way to go.

 

Thanks a lot for the 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.
×