Jump to content
GreenSock

davegrant

Responsive Scrollmagic/GSAP

Recommended Posts

I've been attempting to create what would first appear as a simple parallax-style scrolling page using TweenMax and scrollmagic, however making it work responsively has proved difficult.


Essentially, what i'm after is for a page to load with a header image and a h1 title in a 70%/30% split, with the banner position fixed to the top of the page, resizing to 50% window height as the page scrolls and the h1, being pulled up above the header image and fading to 0 opacity. Once the header image hits 50% window height, it should unpin and the rest of the content should scroll up to a negative offset, just overlapping the header image, and then scroll as normal.


Difficult to explain textually so the codepen referenced is annotated and should explain things better. I've tried everything I can think of here but after the first scene ends, the pin-spacer's min height adjusts itself for reasons i can't figure out and then won't return to it's previous value on reversing scroll. I suspect aligning the lower header with javascript isn't best but CSS didn't work much better either.


Any and all ideas are really appreciated.


Thanks


See the Pen EVvwzm by digitalpencil (@digitalpencil) on CodePen

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