ferriss Posted February 6, 2023 Share Posted February 6, 2023 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 More sharing options...
Rodrigo Posted February 6, 2023 Share Posted February 6, 2023 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 More sharing options...
Solution ferriss Posted February 7, 2023 Author Solution Share Posted February 7, 2023 I've done this now @Rodrigo, but seems excessively complex from a GSAP point of view? Can it be refactored? Link to comment Share on other sites More sharing options...
GreenSock Posted February 7, 2023 Share Posted February 7, 2023 7 hours ago, ferriss said: I've done this now @Rodrigo, but seems excessively complex from a GSAP point of view? Can it be refactored? Would you mind elaborating a bit? What's excessively complex? Can you please provide a minimal demo that shows the code you want to refactor? Link to comment Share on other sites More sharing options...
ferriss Posted February 8, 2023 Author Share Posted February 8, 2023 All the JS is what I want to refactor. It’s as minimal as possible! As such can any of it be combined? Link to comment Share on other sites More sharing options...
GreenSock Posted February 8, 2023 Share Posted February 8, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now