[BUG] interruption with scroll timeline

[CodeWithOz]

Describe the bug Using ScrollTimeline for animations within the sheet got broken between 1.2.6 and 1.2.7. The animated elements seem to think that the scrollable element is at the end of the scroll area when the sheet is initialized. I was using 1.2.6 and recently upgraded to 1.2.8 and saw this problem, then downgraded to 1.2.7 and still saw the problem. In my example I'm using the scroll timeline to indicate the "active" tab as the user swipes left/right. However the sheet is initialized with the tab on the right i.e. end of the scroll area with the active color instead of the one on the left.

To Reproduce I created a sample reproduction of my cordova app, you can view the code here and test it in this build

Expected behavior The "comment" tab should be highlighted with the black background and white text when the sheet is opened.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: Tecno Android phone and Samsung Galaxy Ultra Note 20
• OS: Android 8.1 - Android 12
• Browser Chrome Webview
• Version 97

Additional context Add any other context about the problem here.

[CodeWithOz]

Okay the cordova app I linked to needed some fixes to show the bug properly. I've fixed it. I've pushed the new code so it's still available on the feature-scroll-snap branch, and the app that shows the problem can be downloaded here. I also did a recording so you know what to expect.

https://user-images.githubusercontent.com/28525986/152810207-792f90e0-5c48-4dbc-bd17-546f9db4f396.mp4

The comment tab has the lightblue background, but you can see that the sheet is initialized with the public tab highlighted even though the scroll position is on the comment tab. But once I start swiping to go the profile then public tab, the problem goes away. As you can see in the code, the entire html of the sheet is always added newly to the DOM using requestAnimationFrame just before the sheet is initialized. I noticed that if I always have the html of the comments, profile and public tabs in the DOM, the problem doesn't happen, meaning that the comment tab is highlighted when the sheet is initialized.

Let me know if any more info is needed.

[roman-rr]

Hello @CodeWithOz Thank you for issue. I reviewed your code and here some conclusions:

When you initialize ScrollTimeline with new ScrollTimeline(...), your DOM isn't visible on viewport and active tab is not correctly calculated. You must initialize ScrollTimeline after composed and ready DOM.

Simple solution is to present pane first, and using async/await function to be sure that pane presented. And after this ScrollTimeline can be initialized without issues.

function initPane(...) {
  requestAnimationFrame(async() => { // Here async
    ...
    if (shouldPresent) {
      await myPane.present({ animate: true }); // Here you await for presentation
    }

    // And after presentation you could initialize ScrollTimeline and other ScrollTimeline works
   const scrollSnapContainer = document.querySelector(`.content`);
   const sectionScrollTimeline = new ScrollTimeline({
     scrollSource: scrollSnapContainer,
     orientation: 'inline',
     fill: 'both',
   });
   ...
  });
}

[CodeWithOz]

@roman-rr thanks for that, it worked. :+1: :tada: