adamo Posted August 29, 2023 Share Posted August 29, 2023 Hi. I'm currently developing an animation that uses two section pinned in the same place. The idea is that after the user scrolls and "enters" the trash bag. the last frame should change the opacity and let the horizontal scroll take over (which works almost great). The problem is with the reverse animation as the horizontal scroll hits the first slide. The last frame of the trash bag appears. This project id done on a tight deadline and I'm hoping there's a simple solution for this. A delay maybe? Some spacing between te start of the counter and horizontal scroll? See the Pen yLGOyar by depcore (@depcore) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2023 Share Posted August 29, 2023 Heya, happy to help here but struggling to follow a little. Could you maybe point to the bit of the code and include some screenshots or a screen recording of the issue? I'm not entirely sure what the reverse animation is or when the last frame shows up? Thanks so much! Link to comment Share on other sites More sharing options...
adamo Posted August 29, 2023 Author Share Posted August 29, 2023 Sure. Here's the video. In the 4th second the "55 years..." should be counting as the rest of the numbers in other slides (we get the finished counter when we enter the slide). And when the users scrolls back to "55 yeasrs..." it should not be covered right away by the last frame of the bag, only when the user scrolls further up. Link to comment Share on other sites More sharing options...
Cassie Posted August 29, 2023 Share Posted August 29, 2023 If I'm understanding - you can change your snapping points a little. //this... snap: 1 / (sections.length - 1), // could be written like this too snap: [0, 0.33, 0.66, 1] // 0 is the beginning and 1 is the end, and the decimals in between are the snapping points in the middle // so if you don't want to snap right at the beginnning (0) - you can do this snap: [0.1, 0.33, 0.66, 1] Also you'll need a vertical trigger for the first counter because it's already 'in view' horizontally from page load. See the Pen MWZyJpV?editors=0010 by GreenSock (@GreenSock) on CodePen Hope this helps! Link to comment Share on other sites More sharing options...
adamo Posted August 30, 2023 Author Share Posted August 30, 2023 Thanks for your help. Its a nudge in the right direction, the problem is the content is't centered in the first slide. But it got me thinking what if the first slide was one third the width of the rest (or some amount). So when the user scrolls he wont notice it. Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 30, 2023 Solution Share Posted August 30, 2023 Or just change the first value to 0.001? You can snap wherever you want! See the Pen MWZyJpV by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
adamo Posted August 31, 2023 Author Share Posted August 31, 2023 Than you for your help. I'll play around with it. 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