Jump to content
heavylifting

On scroll have sections fade in and out

Recommended Posts

hi,

 

I'm trying to recreate the functionality of this New York Times page where as you scroll down the background fades into the section below and text elements can scroll over the background images before fading into the next row/section.
 

I have made a start https://codepen.io/heavymessing/pen/WjbVNJ but it looks kind of clunky and I was wondering if there is a way to do it with scrollMagic and GreenSock. I have another version

See the Pen zwGJLx by heavymessing (@heavymessing) on CodePen

but I don't know how to get one section fading in over the other?

thanks,

Share this post


Link to post
Share on other sites

Hi heavylifting :)

 

Welcome to the forum.

 

I'm not 100% sure what you're asking. Your first demo looks like you're close to what you're describing as the desired outcome. Are you mainly asking about the best approach? You can certainly make this happen with GSAP and ScrollMagic. If you've never used ScrollMagic, Petr Tichy has some good tutorials here:

 

https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/

https://ihatetomatoes.net/5-days-with-scrollmagic/

 

In other threads about ScrollMagic, Blake has shown a few ways to approach that type of scroll triggered animation without using ScrollMagic. Here are a couple of good threads:

 

https://greensock.com/forums/topic/16088-gsapscrollmagic-glitchy-in-between-page-sections/

https://greensock.com/forums/topic/16288-reset-animation-when-the-animated-element-is-scrolled-out-of-the-browser-viewport/

 

And a couple of Blake's great demos should give you some ideas:

 

See the Pen 46295694a457cc0c61f32a8153e26639 by osublake (@osublake) on CodePen

See the Pen 0d4742d2200d028ed42297cb874af2b5 by osublake (@osublake) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 1

Share this post


Link to post
Share on other sites

Hey PointC

 

Thanks for the links, I have seen the I hate tomatoes guy before but I am not familiar with Blake's work, I check it out.

Thanks

Share this post


Link to post
Share on other sites

Hi heavylifting,

 

There are a lot of ways to Rome - to NY Times also.

 

Here a start version: 

See the Pen wdMJzg by mikeK (@mikeK) on CodePen

 

Its rough - fast scrolling is still a problem.

 

Just a tip: Use the indicators and the scroll positions for further improvement.

 

Questions regarding ScrollMagic are welcome also on:  https://github.com/janpaepke/ScrollMagic/issues

 

Happy scrolling ...

Manfred

  • Like 2

Share this post


Link to post
Share on other sites

Wow, thanks Manfred!

 

That's awesome! I'll have a play around with that and see where it goes : ] 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.