Mattrudd Posted August 16, 2022 Share Posted August 16, 2022 Hi again... I'm looking to add a Lottie ScrollTrigger animation on a page with ScrollSmoother. It's been a breeze to replace Locomotive Scroll so far, literally just snip out the scroller proxy and setup the ScrollSmoother at the beginning. It seems I've skipped a beat here with this Lottie section though... with ScrollSmoother active, the Lottie animation runs and pins but doesn't scroll up to reveal the bottom spacer div. Have checked the Lottie helper function and searched the forum for any Lottie/ScrollSmoother examples and come up blank so far. Have commented out the ScrollSmoother in the pen demo attached and it works as expected. Any pointers to highlight what I've overlooked here would be as ever, very gratefully received! 🙃 See the Pen mdxVwXG by matt-rudd (@matt-rudd) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 16, 2022 Solution Share Posted August 16, 2022 You just had a missing closing div. Here you go! See the Pen yLKQqqd?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Mattrudd Posted August 16, 2022 Author Share Posted August 16, 2022 @Cassie oh my. I really AM having one of those days 🤣 Thanks for stepping in again! Now where's that 'delete post' button... 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 Swinging me some really easy ones here. It's a nice break. Thanks 😂 1 Link to comment Share on other sites More sharing options...
Roman Yasinskyi Posted July 25, 2023 Share Posted July 25, 2023 @Cassie one question. in above codepen, when you scroll down or up, top/bottom border is shiving. how to fix this problem? I get this error on my website. Link to comment Share on other sites More sharing options...
Rodrigo Posted July 26, 2023 Share Posted July 26, 2023 Hi @Roman Yasinskyi and welcome to the GreenSock forums! Enabling normalizeScroll seems to fix it. Here is the updated codepen: See the Pen oNQaZgm by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Roman Yasinskyi Posted July 26, 2023 Share Posted July 26, 2023 Hi, @Rodrigo Thanks for your help. but I have one problem yet. As you can see, the border line is occured on top of div including lottie. I want to fix this bug asap. Looking forward to hearing good sounds from you. Thanks. Link to comment Share on other sites More sharing options...
Rodrigo Posted July 26, 2023 Share Posted July 26, 2023 Hi, Adding will-change: transform to the smooth content element seems to work on my end: #smooth-content { overflow: visible; width: 100%; will-change: transform; } I updated the codepen: See the Pen oNQaZgm by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 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