Is there a way to disable mobile resize for a specific animation?

[wobwobwob]

The animation in my hero jumps when the address bar is hidden on mobile, I fixed this by setting "ignoreMobileResize" to true on the "ScrollTrigger.config".

But some animations further down the page (that become sticky) need to be recalculated when the address bar is changed. For now I set it back, on staging you can see the that the hero animation on mobile jumps: https://neverland.owow.dev/

Is there a way to disable the mobile resize for my hero animation only?

Ps: I already tried many options like InvalidateOnRefresh but without success.

 

Kind regards,

Tom

[OSUblake]

Hi wobwobwob,

 

It's hard to tell what's going on with a live site, but maybe you are experiencing this issue. 

 

 

 

 

[wobwobwob]

No it's not related, the problem is that the animation resets when the address bar shows again.

Spend days figuring out how to fix this, I fixed it by not defining a trigger. Did not even know that was possible, do you have any clue what was the problem for me so I understand?

 

// Tale fade words
const letters = document.querySelectorAll('.section-hero .tale-fade span');

let taleFade = gsap.timeline({
    scrollTrigger: {
        // trigger: '.section-hero .sticky',
        start: '0',
        end: '+=60%',
        scrub: true,
    },
});

taleFade.to(letters, {
    opacity: 0,
    stagger: 0.1,
});

[OSUblake]

It's hard to a answer question like that without a demo. I did notice that you are using version 3.10.3, which was just released, so maybe that fixed the issue. 

 

And you don't have to define a trigger. Without one, it will use the body.