Animation of scrolling in a horizontal layout

Question

Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to:

<div class='layout horizontal'>
     <div ng-repeat="elements in forms"></div>
</div>

Although new elements are rendered smoothly at the right side of the previous one with focus, there is an abrupt appearance which makes scrollbars appear suddenly without any transition, causing a slightly chaotic visual effect. I would like to implement a smooth scrollbar movement.

I have included a sketch depicting the current situation: https://i.stack.imgur.com/pM9jD.png

To address this issue, my thoughts are:

Avoid sudden movement to the new element.
Gradually move the scrollbar from its previous position to the new one.

Are you aware of any transitions in Angular or Polymer that could accomplish this? Any ideas on how to achieve this desired effect?

html css angularjs polymer polymer-1.0

Answer 1

Answer №1

While I may not be familiar with angular and ng-repeat, it seems that the logical approach would be to handle it in a more traditional manner;

.horizontal
{
   width: 100%; /* or whatever width you prefer */
   overflow-x: scroll;
}

 /* clear floats for inner elements */
.horizontal:before{ clear: both; content: " " }
.horizontal:after{ clear: both; content: " " }

.horizontal .elements.in
{
   float: left; /* align horizontally */
   width: 500px; /* or your preferred inside elements width */
}

Answer 2

While I may not be familiar with angular and ng-repeat, it seems that the logical approach would be to handle it in a more traditional manner;

.horizontal
{
   width: 100%; /* or whatever width you prefer */
   overflow-x: scroll;
}

 /* clear floats for inner elements */
.horizontal:before{ clear: both; content: " " }
.horizontal:after{ clear: both; content: " " }

.horizontal .elements.in
{
   float: left; /* align horizontally */
   width: 500px; /* or your preferred inside elements width */
}

Animation of scrolling in a horizontal layout

Answer №1

Similar questions

Retrieving HTML source code using PyGTK WebKit

Jquery Toggle not applying class change on mobile devices

What is the process for running an Angular 1.4 application on a system with Angular 6 installed?

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Utilizing Regular Expressions in AngularJS to validate name, a 10-digit mobile number, and a 12-digit number through the ng-blur event and match

Custom Select Menu Options from Basic Key-Value Mapping

Exploring the concept of closures in AngularJS

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Having trouble applying styles to a component using forwardRef

Eliminate the dimming background on a discussion thread in Discourse

When the credentials flag is set to true, the use of a wildcard '*' in the 'Access-Control-Allow-Origin' header is not allowed, as per Stormpath's guidelines

What is the most efficient way to implement OR conditions in JavaScript for shorter code

Navigating through website links while working locally on a localhost server can

Unlocking the Mysterious Realm of HTML

Updating the image source attribute using Vue.js with TypeScript

Animate the entrance of mobile content as it slides into view while scrolling

Tips for wrapping text around an image using Bootstrap 5

Retrieving $rootScope within a callback function in Google Maps

Enhance the brightness and add a subtle glow to an image inside a div element when hovering over the div

I wish to substitute a form field with a different one once the value of another field matches a specific condition