You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The element indicator uses an animation (css transistion) to move to the next element. However, if the element is outside of the viewport the page scrolls instantly to the element. It is confusing because the animated element leaves the viewport which then jumps to another location.
Expected Behavior
It would be nice if both would be smoothly animated or none
Actual Behavior
The page scroll is instant.
Potential solution
Use scroll-behavior on html tag (and scrollable container elements) using a separate css class which is applied temporarily. Use the same class to apply the transition to the helper element. Add an option to apply this class, making both animations optional.
The text was updated successfully, but these errors were encountered:
Recently, i needed to implement a smooth scroll in my introJS tutorial, and, as a workaround, you can use introJS onbeforechange function. It looks something like this:
Then, on your element you can data-custom-scroll-to property and set it to something meaningful to you. For instance, I use "top" or "element", for "top", i scroll to top: 0, and for "element", I scroll to top: htmlEl.offsetTop - 300 .
In this case, my htmlEl look like: <section data-custom-scroll-to={'element' as CustomScrollTo} className="...">
Other solution, you can add smooth scrolling globally if you want. But I did not want to do that.
For my solution, I also needed mdDown variable that specifies the device width so i can position my element better so the tooltip has enough space on the top of the highlighted element.
Description
The element indicator uses an animation (css transistion) to move to the next element. However, if the element is outside of the viewport the page scrolls instantly to the element. It is confusing because the animated element leaves the viewport which then jumps to another location.
Expected Behavior
It would be nice if both would be smoothly animated or none
Actual Behavior
The page scroll is instant.
Potential solution
Use scroll-behavior on html tag (and scrollable container elements) using a separate css class which is applied temporarily. Use the same class to apply the transition to the helper element. Add an option to apply this class, making both animations optional.
The text was updated successfully, but these errors were encountered: