Jump to content
Search Community

Scrolling in and out text with a pause

ferriss test
Moderator Tag

Go to solution Solved by ferriss,

Recommended Posts

Got a tricky animations to complete and every time i try i hit another issue.

 

I have 3 unique screens (can be many fade in and out animations though).

 

I want each text to fade in when the bottom is 200px from the bottom of the viewport and finish center center and then pause on scroll for say 200px and then fade out when the top hits 200px from top.

 

Finding it difficult to chain though, and also to work out how the second animation can start when the first has finished.

 

 

See the Pen QWBPbXd by CHEWX (@CHEWX) on CodePen

Link to comment
Share on other sites

Hi,

 

I'm a bit confused by your demo as it doesn't really reflects what you're mentioning, as you're just animating the first block of text.

 

Maybe you could use pinSpacing: false in your ScrollTrigger configuration.

const st = ScrollTrigger.create({
  trigger: '.section--1 .section__text',
  start: "center center",
  end: "+=200",
  pin: '.section--1',
  pinSpacing: false,
  markers: true,
})

Another option is to create a loop for all the sections or perhaps use ScrollTrigger batch for this:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Hopefully this helps. If you have more questions let us know.

Happy Tweening!

Link to comment
Share on other sites

All of what JS? You posted a demo and then Rodrigo suggested something and you said it seems excessively complex. So are you wanting to refactor the version with Rodrigo's suggestion or your original? If you'd like some help, please post a CodePen with exactly the code you want to refactor. Sorry if I'm missing something obvious. 

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