data-scroll-speed creates jumping elements

[QuintonC]

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 👊

[yepecece]

Same problem here... any fix?

[niall-forrest-old]

Also having this exact issue

[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.

[Gu2s]

Having the same issue. But it only occurs when using negative data-scroll values. Also once you scroll passed a jumping element and it is in the "correct position" it stops jumping. So basicly the "starting position" is wrong. Haven't been able to find a fix yet.

[clmsftsw]

I have the same issue. I get jumping elements when using negative data-scroll values.

[connorhvnsen]

Same issue. Jumping with negative and positive data-scroll values. Seems like initial transforms are not being applied.

[theconsigliere]

Also having this issue, working on a horizontal scroll direction just with positive scroll values.

[s-rd]

Also having this issue. Can work around it for now, probably, but would be great to have a fix.

Second @hansenconnor, seems like initial transforms aren't being applied (if data-scroll-speed is negative or positive doesn't affect it).

[sunnylqm]

the default scroll position may be a problem.

Try adding data-scroll-position="top"

[elliottmangham]

+1 I am having the same issue

[ZakaryaNoori]

+1 I am having the same issue

[felipecava]

the default scroll position may be a problem.

Try adding data-scroll-position="top"

Thanks, work for me

[jeronimus23]

@sunnylqm Thank you! that works for me.

[P-Mattie]

I had the same issue with the negative speed having it move far off its position and jump on first render. I noticed it was when it was outside of its container. Overflow hidden worked perfectly for what I wanted. Which was a 2 column gallery: left scrolling down and right scrolling up.