Elements slightly out of window not firing

[terwanerik]

Elements slightly out of window not firing

[daveswebdesigns]

I found a workaround using animation instead of transition, it actually makes the css a little cleaner as all of the .*Out classes are just opacity: 0 and all of the action happens in the animation.

dur = 1s
ease = ease-in-out
dist = 60px

@keyframes fromLeftIn
    0%
        transform translate(-(dist),0)
    100%
        transform translate(0,0)
        opacity 1 !important

.fromLeftIn
    animation fromLeftIn dur ease

.fromLeftOut, .fromRightOut
    opacity 0 !important

Must be used with once:true or else it freaks out, but otherwise works good.

[daveswebdesigns]

The workaround above doesn't work if the element ends up slightly out of the window. I made a tiny edit to the scrolltrigger source code which works good if you're not using any horizontal scrolling

this.left = function(_this){
    return function(){
        return 20;
    };
}(this);

[terwanerik]

v1.0 is just released! Could you check if this issue still exists? Please note that the API has changed quite a bit.

[terwanerik]

I'd reckon this can be fixed in v1 by passing { offset: { element: { x: 20 } } } as options for the out of bounds trigger, if this issue exists at all.

[light423]

hi! It's not working option.
I can not speak english well. sorry~

const trigger = new ScrollTrigger({
trigger: {
once: true
}
});

Is it wrong???