Jump to content
Search Community

ScrollMagic + GSAP : slow animations

jdutheil test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everybody,

 

I'm working on my first project with ScrollMagic + GSAP ; in fact, I need some parallax effects for a singlepage website.

Result is visible here : http://projets.jeremy-dutheil.fr/gsap/

 

As you can see, it's a little "slow" / "laggy" even in desktop ; it's really worse on mobile device like tablets, not even usable..

Any idea ?

The js file : http://projets.jeremy-dutheil.fr/gsap/js/app.js

 

Thanks

Link to comment
Share on other sites

Disclaimer: I'm not very familiar with ScrollMagic personally and we really can't support it here in these forums (you could contact its author).

 

I did notice this during my cursory glance:

$(window).bind('scroll', function(e) {
        var val = $(this).scrollTop();


        if (val >= $bioSection.offset().top && val < $picSection.offset().top) {
            $bioLink.addClass('active');
        } else {
            $bioLink.removeClass('active');
        }


        if (val >= $picSection.offset().top && val < $timelineSection.offset().top) {
            $picLink.addClass('active');
        } else {
            $picLink.removeClass('active');
        }


        if (val >= $timelineSection.offset().top && val < $discSection.offset().top) {
            $timelineLink.addClass('active');
        } else {
            $timelineLink.removeClass('active');
        }


        if (val >= $discSection.offset().top && val < $videosSection.offset().top) {
            $discLink.addClass('active');
        } else {
            $discLink.removeClass('active');
        }


        if (val >= $videosSection.offset().top && val < $showsSection.offset().top) {
            $videosLink.addClass('active');
        } else {
            $videosLink.removeClass('active');
        }


        if (val >= $showsSection.offset().top) {
            $showsLink.addClass('active');
        } else {
            $showsLink.removeClass('active');
        }
    });

That's doing a TON of work on every scroll event (which may fire even MORE than 60 times per second). Not only are you having jQuery calculate the offset() of a bunch of elements (which often forces style recalcs and reflows), but then you're also adding/removing classes which can have the same effect. It's just a very expensive method. You should definitely consider throttling that method and maybe rethink the logic of needing to calculate the offset() of so many things on every scroll. 

 

Also, this was a little bit questionable:

$(window).on("mousewheel DOMMouseScroll", function (event) {
            event.preventDefault();


            var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
            var scrollTop = $(window).scrollTop();
            var finalScroll = scrollTop - parseInt(delta * scrollDistance);

            TweenMax.to($(window), scrollTime, {
                scrollTo : { y: finalScroll, autoKill:true },
                ease: Power2.easeOut,
                overwrite: 5
            });
        });

Every time there's even the smallest amount of scroll (and this may fire even more than 60 times per second), you're doing multiple jQuery lookups AND creating a new tween. That tween is scrolling the window which may in itself be triggering various other things to happen inside ScrollMagic. It just seems like it has a fair amount of potential to slow things down. I don't have time to troubleshoot the whole thing and experiment with various solutions, but maybe that'll point you in the right direction. I'm also curious why you're using overwrite:5 instead of overwrite:true. 

 

Performance optimization is a pretty huge field with all sorts of possibilities and factors. I'd suggest making sure you're minimizing the area of change on each tick (reducing the load on the browser's graphics rendering routines). For example, don't alter things that are off-screen. 

 

Good luck!

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