动画结束后添加小反弹

Question

https://www.ateliergymnase.com/

Looking at this site as an example, if you scroll down to the team member section and open up your dev console, you'll notice that even if you stop scrolling there's still a small bit of animation that continues.

In contrast: https://codepen.io/DaveMoran/full/QBbVmM/ using animejs, when a user stops scrolling the animation comes to a halt instead of having the more fluid stop animation.

JS Code for animation:

jQuery(document).ready(function($) {
  // Window properties
    let wHeight = window.innerHeight;
    let wWidth = window.innerWidth;

    $(window).resize(function () {
        wHeight = window.innerHeight;
        wWidth = window.innerWidth;
    });

  let container = $('#scroll-container');
  let containerYOffset = Math.floor(container.offset().top - wHeight);
  $(window).on('scroll', function() {
    let currentPosition = $(window).scrollTop();
    if(currentPosition >= containerYOffset) {
      container.css('position', 'absolute');
      container.css('bottom', '0');
      container.css('top', 'unset');
    }
    container.css('position', 'fixed');

    let xTranslateAmt = currentPosition - containerYOffset;
    let scroll = anime({
      targets: '#scroll-container',
                translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
                easing: 'linear',
                elasticity: 400,
                duration: 0,
    })
  })
})

Is there a way to add a small bounce or trigger a mini animation after the scroll has ended?

Answer 1

I'm not sure if it's what you want as your question is not very clear to me.
But probably you can do the trick just adding a transition . Run the snippet below:

 jQuery(document).ready(function($) { // Window properties let wHeight = window.innerHeight; let wWidth = window.innerWidth; $(window).resize(function() { wHeight = window.innerHeight; wWidth = window.innerWidth; }); let container = $('#scroll-container'); let containerYOffset = Math.floor(container.offset().top - wHeight); $(window).on('scroll', function() { let currentPosition = $(window).scrollTop(); if (currentPosition >= containerYOffset) { container.css('position', 'absolute'); container.css('bottom', '0'); container.css('top', 'unset'); } container.css('position', 'fixed'); let xTranslateAmt = currentPosition - containerYOffset; let scroll = anime({ targets: '#scroll-container', translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px', easing: 'linear', elasticity: 400, duration: 0, }) }) }) 

 body { overflow-x: hidden; } .above-scroll, .below-scroll { width: 100vw; background: #efefef; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } #scroll-content { padding: 50px 30px; height: calc(2300px + 100vh); widtH: 100%; position: relative; overflow: hidden; } #scroll-container { display: flex; flex-direction: row; height: 100vh; left: 100vw; width: 2300px; justify-content: space-between; align-items: center; position: relative; top: 0; transition: .5s cubic-bezier(.59, .86, .96, 1.14) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="above-scroll"> <h2>Above Scroll</h2> </div> <div id="scroll-content"> <div id="scroll-container"> <img src="https://placehold.it/320x320" /> <img src="https://placehold.it/320x420" /> <img src="https://placehold.it/320x480" /> <img src="https://placehold.it/320x320" /> <img src="https://placehold.it/320x480" /> <img src="https://placehold.it/320x200" /> </div> </div> <div class="below-scroll"> <h2>Below Scroll</h2> </div>