Pseudo-Smooth-Scrolling Demo 1/2

Discuss on 🦋

These pages demonstrate the pseudo-smooth-scroll effect, commonly seen on websites that use view transitions for elements larger than the viewport.

This can give the website the appearance of dynamic movement, but it can also be quite disruptive if it occurs unexpectedly.

Use the navigation bar on the left to explore Steps 1 through 4 and learn more about what causes this effect.

Take Step 1 to find out how to identify the pseudo-smooth-scroll effect on a web-site.

Lorem Ipsum Text 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.

Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.

Disabling the group animation on the content element removes the pseudo-smooth-scroll effect. But the result won't look good: Now, instead of the current area of the old element, some other area is shown. The transition group jumps directly to the position of the new image, and for the old image shows what ever happens to be at that position in the old element.

Page 1, step 0/4

Page 2, step 1

Page 2, step 2

Page 1, step 3

Page 1, step 0/4

Viewport

So the old images jumps away from its current content, and even worse, the position shown instead might be empty if the screen was not rendered completely yet or while the snapshot of the old image was taken.

Take Step 4 if you want to revisit this demo again, click the "Exit" button in the header to exit the demo, or see the Cam-Shaft script in action and how it removes the pseudo-smooth-scroll effect.