Jump to content
Search Community

Scrolltrigger Scrub - Detect if an element has enough screen to scrub to end of animation

sixtillnine test
Moderator Tag

Recommended Posts

Follow up question if that's OK...

 

How can I affect the 'end' value so that the animation completes before Max scroll.

 

I've tried:

 

function boxRollMax() {
  const boxes = gsap.utils.toArray('.box');
  const maxScroll = ScrollTrigger.maxScroll(window);
  boxes.forEach((box, i) => {

    const scrubStart = 100;
    const scrubEnd = 50;
    const anim = gsap.from(box, { 
        scrollTrigger: {
            trigger: box,
            toggleActions: "restart pause resume pause",
            start: 'top '+scrubStart+'%',
            end:   'top '+scrubEnd+'%',
            markers: true,
            scrub: 0.5,
            id: 'boxRoll',
        },
        rotate: 360,
        x: '50vw',
    });
    
    const animEnd = anim.scrollTrigger.end;
    const maxScroller = maxScroll;
    const isEndAfterScrollEnd = anim.scrollTrigger.end > maxScroll;
    
    if(isEndAfterScrollEnd){
        anim.scrollTrigger.end = 'top '+maxScroll;
    }
    
    console.log('Box '+i+' end ('+animEnd+') position is after end of scroll ('+maxScroller+'):' +isEndAfterScrollEnd);
    
  });
}

This didn't work for me (obvs ).

 

My goal is for anything scrubby to check if it's end is after the max scroll, and if so switch it out for the maxscroll value.

Link to comment
Share on other sites

This works (locally but not on codepen - which is worrying), but isn't the most elegant solution - is there a better way of achieving this?

 

It fires off a scrollTrigger without any animations to check end points, then there are two different scrollTriggers with animations whose end attribute is set depending on whether or not the original would have finished within the max scroll.

 

function boxRollMax() {
    const boxes = gsap.utils.toArray('.box');
    const maxScroll = ScrollTrigger.maxScroll(window);
    boxes.forEach((box, i) => {
        const scrubStart = 100;
        const scrubEnd = 50;
        const animCheck = gsap.from(box, { 
            scrollTrigger: {
                trigger: box,
                start: 'top '+scrubStart+'%',
                end:   'top '+scrubEnd+'%',
            }
        });
        
        const animEnd = animCheck.scrollTrigger.end;
        const maxScroller = maxScroll;
        const isEndAfterScrollEnd = animCheck.scrollTrigger.end > maxScroll;
        console.log('Box '+i+' end ('+animEnd+') position is after end of scroll ('+maxScroller+'):' +isEndAfterScrollEnd);
        
        if(isEndAfterScrollEnd){
            gsap.from(box, { 
                scrollTrigger: {
                    trigger: box,
                    toggleActions: "restart pause resume pause",
                    start: 'top '+scrubStart+'%',
                    end:   'top '+maxScroll,
                    markers: true,
                    scrub: 0.5,
                    id: 'boxRoll',
                },
                rotate: 360,
                x: '50vw',
            });
        } else {
            gsap.from(box, { 
                scrollTrigger: {
                    trigger: box,
                    toggleActions: "restart pause resume pause",
                    start: 'top '+scrubStart+'%',
                    end:   'top '+scrubEnd+'%',
                    markers: true,
                    scrub: 0.5,
                    id: 'boxRoll',
                },
                rotate: 360,
                x: '50vw',
            });
        }
    });
}

 

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...