Jump to content
Search Community

On scroll have sections fade in and out

heavylifting test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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  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,

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

Link to comment
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
Link to comment
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
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...