Jump to content
Search Community

Pharma banner ISI scroll animation looks a bit jumpy

Rafael Aguilar test
Moderator Tag

Recommended Posts

It's a fairly complex thing to auto-scroll the ISI and let the user interaction stop it, so good job getting this far. If you go all-in with gsap, instead of setting the _scroller.style.top css to an even pixel (remainOffsetHieght is an integer), then you can tween the _scroller y position, which will use transforms and be smoother. Also, set interval (100) is only 10fps, not very smooth looking. If you do everything with gsap, you won't need setInterval. 

hope that helps

  • Like 1
Link to comment
Share on other sites

Yeah, and just to be clear this has absolutely nothing to do with GSAP - it's just that the browser's graphics rendering applies pixel snapping. I don't think scroll can do sub-pixel rendering, and your font also looks like a pixel font where there's no (or little0 anti-aliasing. So imagine the pixel grid on your monitor - a row of pixels can only move 1 whole pixel at a time. So if you stretch out the duration enough, it'll look jerky because it's jumping 1 pixel...then waiting until it hits the rounding threshold and jumping another pixel. 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I'm working with the exact same criteria - autoscroll ISI info on pharma banner ads. I am a designer and familiar with AfterEffects and Animate and use those to do all the heavy lifting around animation coding. But I had to manually add in the autoscroll feature because of the requested parameters. I had ChatGPT write this JS code and it works cross platform. It auto-scrolls after a delay then stops on mouseover and restarts on mouseout. Sorry it's not in Codepen.  I'm a designer and know just enough code to be dangerous. ;) 
 

function () {
    const isiWrapper = document.querySelector(".isi-wrapper");

    let scrolling = false;

    isiWrapper.addEventListener("mouseover", function () {
        scrolling = true;
    });

    isiWrapper.addEventListener("mouseout", function () {
        scrolling = false;
    });

    setTimeout(function scroll() {
        if (!scrolling) {
            isiWrapper.scrollTop += 1;
        }
        setTimeout(scroll, 140);
    }, 500);

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...