Jump to content
Search Community

The site is buggy when I enable smooth scrolling

mr.G test
Moderator Tag

Recommended Posts

Hello everyone!

I have developed a website on Webflow. But there was one very annoying problem.
The site is buggy and lags on different devices. I assume that the reason is smooth scrolling. When I turn it on, the site starts to lag on some devices. And without it, it works fine on all devices.

It probably does not depend on the device. I tried on a Macbook on M1 and on a laptop from Lenovo. Their website is buggy. I also tried it on other devices (HP, Dell) where it does not lag, although the devices themselves are older.


The site has good results on https://pagespeed.web.dev, that is, the site is not overloaded (97 for desktop).


I even removed some animations so as not to load additionally. But that didn’t help me solve the problem.


I also cleared cache and history. It did not help.


I also tried in different browsers (Safari, Chrome, Opera). Same problem.

Here is a link to Google Drive, where you can clearly see how buggy my site is https://drive.google.com/drive/folders/1Kpf6-x1TwbzuUa6Sev56_WbORFyEKUuD?usp=share_link (It shows how the page Home and Jobs lag. Usually lags even more than in these videos.)


Here is my site: https://alev.webflow.io
Here is my site Read-Only: https://preview.webflow.com/preview/alev?utm_medium=preview_link&utm_source=designer&utm_content=alev&preview=36f04219c5322f4ac11fbdcfeb63f69c&workflow=preview


Best regards,
Gadir
 

PS: I know my English is bad so I apologize for it. I wrote this text using Google Translate.


 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script src="https://uploads-ssl.webflow.com/62d7e483a751a962bd1e9d4a/637118b04679d854c04c1f04_ScrollSmoother.min.txt"></script>

<script>
  gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

  $(document).ready(function() {

    $('.cursor_wrapper').removeClass('text-hover');
    $('.cursor_wrapper').removeClass('work-hover');
    $('.cursor_wrapper').removeClass('smallText-hover');
    $('.dot_text').removeClass('visibleText');

    gsap.set("#appearBlock", {opacity: 1});
    gsap.set(".navbar", {opacity: 1});
    $('html').animate({scrollTop:0}, 1);
    $('body').animate({scrollTop:0}, 1);


    let smoother = ScrollSmoother.create({
      wrapper: '#smooth-wrapper',
      content: '#smooth-content',
      smooth: 1,
      effects: true
    }); 


    //////////////////////// Navbar
    navbar(".logo_text");
    navbar(".menu_btn");
    ////////////////////////


    //////////////////////// Hero block
    var heroBlock = gsap.timeline()
    heroBlockAppear(".main-heading", .4, 60, "0%", "140%")
    heroBlockAppear(".suptitle_block", .4, 60, "0%", "800%")
    heroBlockAppear(".main_photo", false, 0, "50%", "0%", () => smoother.paused(true), () => smoother.paused(false), 1.4);

    //// Flow gradient title
    b1 = "linear-gradient(90deg, #FDA1A1 0%, #F7CD9D 14.06%, #BAF79D 31.77%, #9CDEFA 56.25%, #9296F2 76.53%, #CF98FA 88.24%, #F797DC 100%)";
    b2 = "linear-gradient(60deg, #8AD0EE 12.03%, #8589F3 33.25%, #E47C7C 59.67%, #A3EF7F 88.9%)";
    gsap.timeline({})
      .fromTo("#gradientText", {width:"100%", height:"100%", backgroundImage: b1}, {ease: "none", duration: 4, backgroundImage: b2, repeat: -1, yoyo: true});
    ////////////////////////


    //////////////////////// Selected works parallax
    ScrollTrigger.matchMedia({
      '(min-width:768px)':function(){
        workParallax(".selected_photo.second", "-10%");
        workParallax(".selected_photo.first", "-20%");
        workParallax(".selected_photo.fourth", "-5%");
        workParallax(".selected_photo.third", "-25%");   
      }
    });
    ////////////////////////


    //////////////////////// Big shot 
    gsap.set("#bigShotFirst", {scale: .3});
    gsap.timeline({scrollTrigger: {
      trigger: ".big_shot_block",
      start: "center center",
      end: "+=1000",
      pin: true,
      scrub: 1
    }})
      .to("#bigShotFirst", {
      scale: 1,
      ease: "power1.inOut"
    });
    //////////////////////// 


    //////////////////////// Shots
    gsap.set(".shots_item.shots_item-second", {x: "-30%"});
    shots(".shots_item.shots_item-first", "-30%");
    shots(".shots_item.shots_item-second", "0%");


    //////////////////////// Footer
    const footer = ".section.black-footer";
    gsap.set(footer, {y: "-50%"});
    gsap.timeline({
      scrollTrigger: {
        trigger: footer,
        start: "top bottom",
        end: "120% 80%",
        scrub: 1
      }})
      .to(footer, {
      y: "0%"
    }); 
    ////////////////////////


    //////////////////////// Functions
    function navbar(target) {
      gsap.from(target, {
        scrollTrigger: "#appearBlock",
        delay: .5,
        scale: .7,
        opacity: 0,
        ease: "power1.inOut",
        duration: 1
      });
    };
    function heroBlockAppear(target, delayValue, opacity, positionX, positionY, whenStart, whenComplete, duration=1) {
      gsap.from(target, {
        delay: delayValue,
        opacity: opacity,
        x: positionX,
        y: positionY,
        rotation: 15,
        ease: "power1.inOut",
        duration: duration,
        onStart: whenStart,
        onComplete: whenComplete
      });
    };
    function workParallax(target, positionY) {
      gsap.to(target, {
        scrollTrigger: {
          trigger: ".selected_block",
          start: "top bottom",
          end: "bottom top",
          scrub: 1
        },
        y: positionY
      });
    };
    function shots(target, positionX) {
      gsap.to(target, {
        scrollTrigger: {
          trigger: ".shots_block",
          start: "top bottom",
          end: "bottom top",
          scrub: 1
        },
        x: positionX
      });
    };
    ////////////////////////


    //////////////////////// btn works animation
    $('.btn_block.btn_works').on('mouseenter', function() {
      $('.btn_dot').toggleClass('move');
    });
    $('.btn_block.btn_works').on('mouseleave', function() {
      $('.btn_dot').toggleClass('move');
    });
    //// btn contact animation
    $('.btn_block.contact').on('mouseenter', function() {
      $('.btn_dot').toggleClass('move_contact_dot');
    });
    $('.btn_block.contact').on('mouseleave', function() {
      $('.btn_dot').toggleClass('move_contact_dot');
    });
    //// footer btn animation
    $('.btn_block.footer').on('mouseenter', function() {
      $('.btn_dot').toggleClass('footer_move');
    });
    $('.btn_block.footer').on('mouseleave', function() {
      $('.btn_dot').toggleClass('footer_move');
    });
    ////////////////////////


    //////////////////////// Mouse animation
    ////Menu 
    $('.menu_btn').click(function() {
      $('body').toggleClass('overflow_hidden');
      if (!$('.navbar').hasClass("mx_blend")) {
        setTimeout(function(){
          $('.navbar').addClass('mx_blend');
        },500);
      };
      $('.navbar').removeClass('mx_blend');
    });

    ////Button dot animation
    $('.btn_move').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });
    $('.btn_move').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });

    ////Footer button dot animation
    $('.btn_block.footer').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
    });
    $('.btn_block.footer').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
    });

    ////Logo dot animation
    $('.logo_text').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });
    $('.logo_text').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });

    ////Lion logo dot animation
    $('.lion').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });
    $('.lion').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });

    ////Burger dot animation
    $('.menu_btn').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });
    $('.menu_btn').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });

    ////Mini-links dot animation
    $('.footer_link').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('smallText-hover');
    });
    $('.footer_link').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('smallText-hover');
    });

    ////Menu links dot animation
    $('.nav_link').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
    });
    $('.nav_link').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
    });

    ////Buger mail dot animation
    $('.burger_mail').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });
    $('.burger_mail').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('text-hover');
    });

    ////Works dot animation
    $('.selected_photo').on('mouseenter', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
      $('.dot_text').toggleClass('visibleText');
    });
    $('.selected_photo').on('mouseleave', function() {
      $('.cursor_wrapper').toggleClass('work-hover');
      $('.dot_text').toggleClass('visibleText');
    });	
    ////////////////////////

  });
</script>

 

Link to comment
Share on other sites

Hi,

 

I tested the preview (https://alev.webflow.io/) and it looks fine on Chrome and Firefox on Ubuntu. The other URL looks terrible but I guess that is related to the live preview or something like that.

 

Honestly I don't know what to tell you besides to try the latest version of GSAP and the plugins (3.11.4) since you're one version behind and perhaps test this beta version of ScrollTrigger 3.11.5:

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If possible see if you can replicate the issue in a minimal demo so we can take a better look at it. Using webflow and the code you pasted is not the best way to find and correct issues.

 

Sorry I can't be of more assistance.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Nice looking site! It performed fine for me.

 

I doubt the problem has anything to do with the version of GSAP. Performance is a very deep topic, so we can't really provide a free performance audit with a lot of detail, but here are a few quick thoughts: 

  • You've got loading="lazy" on some images. Be very careful with that because it can cause layout shift and it also forces network connectivity WHILE you're scrolling which can hurt performance. At the very least I'd recommend setting a specific width/height on those to avoid layout shifts (which can be very expensive)
  • It looks like you've got some CSS animations getting triggered. Be careful with those. Definitely avoid animating anything with CSS that you're also animating with GSAP
  • You seem to have a lot of mouse/pointer events. As you scroll, your mouse goes over lots of stuff, so you're triggering stuff quite a bit (expensive). 
  • You've got  mix-blend-mode: difference in your CSS on the mouse follower. Be very careful with blend modes like that because they can be quite expensive. Filters are also terrible for performance. None of this has anything to do with GSAP, of course. 
  • You might want to try setting will-change: transform on any elements that are likely graphics-rendering-intensive. Sometimes it can help. 

I hope that gets you going in the right direction. 

 

Thanks for being a Club GreenSock member! 💚

  • Like 3
Link to comment
Share on other sites

@Rodrigo Thanks for the answer. Unfortunately I can't show a minimal demo as I don't know what is causing the problem. Therefore, I can not even reproduce this problem here

@GreenSock I kind of turned off the load load on all the photos. But I'll check again. Thanks for the tips, I'll keep that in mind. It's just that I have already found sites with very similar effects and they do not lag.

In the end, you want to say that the problem is not in smooth loading, but in the performance of the site itself, right? I checked on Pagespeed ( https://pagespeed.web.dev) and the result is 97, or is it not a serious result? Or is there some other way to check?

Link to comment
Share on other sites

Hey there!

 

Quote

In the end, you want to say that the problem is not in smooth loading, but in the performance of the site itself, right? I checked on Pagespeed ( https://pagespeed.web.dev) and the result is 97, or is it not a serious result? Or is there some other way to check?

So page speed (how long it takes to load a page) and rendering performance are completely different things.

Rendering perf is the stuff that's happening as you scroll, as you hover over elements and as things animate. Browsers, especially older browsers and mobile browsers can struggle with too much animation, or animating properties that trigger layout or paint.

This is a good overview - https://web.dev/rendering-performance


This is good advice on rendering perf too.

 

Quote

You've got  mix-blend-mode: difference in your CSS on the mouse follower. Be very careful with blend modes like that because they can be quite expensive. Filters are also terrible for performance. None of this has anything to do with GSAP, of course. 


You might want to try setting will-change: transform on any elements that are likely graphics-rendering-intensive. Sometimes it can help. 


There's no silver bullet though I'm afraid, making sure you animate performant properties like transforms and opacity, reduce animations on mobile, be careful not to overload the browser with filters and blend modes, add will-change on elements that animate, swop perf-intensive animations over to canvas... there's a lot of little micro adjustments. But no one thing that we can suggest that will definitely do the job.

Tweak and test, tweak and test. And test on a variety of devices.

 

  • Like 4
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...