Jump to content
Search Community

Tweenmax scale to performance issues (jumpy, intermittent)

mattchaptr 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 guys,

 

Firstly, thanks for the awesome technology. We use it a lot here in our studio.

 

We've run into some issues with a site we're developing where scaling a div on scroll using ScrollMagic causes really jumpy performance on Chrome on Mac.

 

We've tried all the usual - taking off/putting on will-change transform, setting a slight rotation at 0.01, backface visibility etc...

 

You can see it here:

 

http://athenasyntax.chaptr.studio

Username: Athena Syntax

Password: CH-AthenaSyntax-18!

 

Here's the initialisation:

 

    if ($('body').hasClass('page-template-page-template-home')) {
        var controller = new ScrollMagic.Controller(),

        tween = TweenMax.to('#pin', 1, {
            rotation: 0.01,
            scale: 1,
            ease: Linear.easeNone,
        }),

        $hero_height = ($('#hero').outerHeight() / 2) - 140;

        scene1 = new ScrollMagic.Scene({
            triggerElement: "#pin",
            triggerHook: 'onLeave',
            offset: -10,
            reverse: true,
        })
        .setPin("#pin")
        .setClassToggle('body', 'pinned')
        .addTo(controller);

        var scene2 = new ScrollMagic.Scene({
            triggerElement: "#hero",
            duration: 100,
            triggerHook: 0,
            reverse: true,
        })
        .setTween(tween)
        .addTo(controller);
    };

 

I'm just wondering if I'm doing anything wrong. Any help would be really appreciated, so thanks in advance.

 

Matt

Link to comment
Share on other sites

I can't access your site, so I can't see what's going on. GSAP doesn't do any rendering, so I don't see how this could be related to GSAP.

 

Does your div contain SVG or complex fonts/text? That can be slow.

 

Scrolling can be a bottleneck, and ScrollMagic isn't a GSAP product.

https://github.com/janpaepke/ScrollMagic

 

If you need something to be pinned, consider using CSS sticky positioning instead.

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

 

 

 

 


 

 

 

  • Like 5
Link to comment
Share on other sites

Hi OSublake,

 

Thanks for the reply. I got the username and password wrong, it is:

 

Username: Athena Syntax

Password: Athenasyntax2018!

 

Appreciate it might not be due to GSAP, but I noticed a few similar threads here that explored similar issues so I thought I'd check to see if there was anything anyone could think of.

 

Thanks again,

 

Matt

Link to comment
Share on other sites

Hello @mattchaptr and Welcome to the GreenSock Forum!

 

It looks like whats is happening is that for some reason when scrolling there is a body class being added to the body tag adding the class lock-scroll which has a  CSS property overflow: hidden. Then it removes the scrollbars and adds it again and then removes it again, all within a second upon first scrolling. That is why it does the side ways jank jiggle ;)

 

In your style.css .. on line 1 since i believe the file is minified, so you will need to find what is adding the below CSS in your code when scrolling.

 

/ * this is being added by your code when you begin scrolling, causing that jiggle jank */
body.lock-scroll {
    overflow: hidden;
}

 

Let us know if you find what is adding that overflow hidden .lock-scroll class  on the body class ? :)

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