data-scroll-speed creates jumping elements

Hello 👋

Describe the bug When using data-scroll-speed I’m seeing jumping elements on the first inview appearance.

There is another card that is similar, but not entirely the same.

To Reproduce Steps to reproduce the behavior:

<?php if ( get_row_layout() == 'project_highlight_rows' ) : 
    
    $projects = get_sub_field( 'projects' ); ?>

    <div class="highlighted-projects" data-scroll-section>

        <?php foreach ( $projects as $project ) : 

            $categories = get_the_terms( $project->ID, 'project_categories' );
            $category_name = !empty( $categories ) ? esc_html( $categories[0]->name ) : 'Uncategorized';
            $post_title = get_the_title( $project->ID );
            $post_showcase_image = get_field( 'post_showcase_image', $project->ID ); ?>
        
            <div class="project-wrapper">

                <div class="xw-wrapper">

                    <div class="row align-items-center justify-content-between">

                        <div class="col-lg-4 col-12 project-details" data-scroll data-scroll-speed="-3">

                            <a class="title" href="<?php echo get_the_permalink( $project->ID ); ?>" title="<?php echo $post_title; ?>"><h2><?php echo $post_title; ?></h2></a>

                            <span class="project-details">Quick description of project details</span>
                            
                            <span class="project-tags"><?php echo $category_name; ?></span>

                            <a class="cta-link" href="<?php echo get_the_permalink( $project->ID ); ?>" title="<?php echo $post_title; ?>">
                                <span>View Project</span>
                            </a>

                        </div>

                        <div class="col-lg-6 col-12 project-imagery" data-scroll data-scroll-speed="3">

                            <div data-scroll>

                                <?php the_acf_lazy( $post_showcase_image, 'auto', 'contain' ); ?>

                            </div>

                        </div>
                
                    </div>
                    
                </div>
                
            </div>
            
        <?php endforeach; ?>

    </div>

<?php endif; ?>

Expected behavior I would expect that the smoothing behavior would be smooth.

Screenshots Here is a video.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 87.0.4

Thank you 👊

[sunnylqm]

the default scroll position may be a problem.

Try adding data-scroll-position="top"

[canadianeagle]

I’ve had the same issue a few times. This fixed it for me - add the data-scroll-target attribute. For example: data-scroll-target="#gallery" would keep the element attached to a div with id gallery and fix the jumping issue.