Jump to content
Search Community

LolaDany

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by LolaDany

    Scroll trigger breaks on resize window / timeline

    in GSAP

    Posted

    Here is the link with the testing site -> http://danytest.lola.lu/

     

    On resize the window the two pinned section break .. really don't know what to do.. kinda new in gsap

    It only breaks when you resize the window under the pinned section, when you want to scroll up again 

     

    my scroll trigger ->

    my 2 pin scroller trigger are .mf and .stat

     

    THANKS

     

    gsap.registerPlugin(ScrollTrigger);


     
    const anim = gsap.timeline({
    scrollTrigger: {
    trigger: '.mf',
    start: 'top',
    end: 'bottom -=5000px',
    pin: true,
    anticipatePin: 1,
    scrub: true,
    invalidateOnRefresh: true,
    },
    });
     
    anim.to('.mf-text', {translateY: '0'}, 'one')
    anim.to('.mf-cover', {opacity: '1'}, 'three')
    anim.to('.mf-text', {fontSize: '200vw'}, 'three')
    .add( function(){
    $('html, body').animate({
    scrollTop: $('.mf-page').offset().top,
    }, 500);
    } );
     
    const animstat = gsap.timeline({
    scrollTrigger: {
    trigger: '.stat',
    start: 'top',
    end: 'bottom -150%',
    pin: true,
    scrub: true,
    },
    });
    animstat.to('.stat-text', {translateY: '0'}, 'stat-one')
    animstat.to('.stat-text', {fontSize: '3000px'}, 'stat-two')
    animstat.to('.stat-cover', {opacity: '1'}, 'stat-three')
    animstat.to('.stat-text', {fontSize: '5000px'}, 'stat-three')
     
    ScrollTrigger.batch('.hiderev', {
    start: 'top+=100px bottom-=200px',
    onEnter: batch => gsap.to(batch, {opacity: 1,x:0, y:0, stagger: 0.15}),
    onLeaveBack:batch => gsap.to(batch, {opacity: 0,translateY:'50px', stagger: 0.1}),
    });
     
    ScrollTrigger.create({
    trigger: '.mf-page',
    start: 'top 100%',
    end: 'bottom 100%',
    toggleActions: 'play pause resume reverse',
    onEnter: hideblacks,
    onLeave: showblacks,
    onEnterBack: hideblacks,
    onLeaveBack: showblacks,
    });
    function hideblacks() {
    $('.menu-side').css('left', '0');
    $('.menu-side__line').removeClass('hideextra');
    $('.menu-side__text').removeClass('hideextra');
    }
     
    function showblacks() {
    $('.menu-side').css('left', '-100%');
    }
     
    ScrollTrigger.create({
    trigger: '.homebanner',
    start: 'top 100%',
    end: 'bottom 20%',
    toggleActions: 'play pause resume reverse',
    onEnter: showmenu,
    onLeave: hidemenu,
    onEnterBack: showmenu,
    onLeaveBack: hidemenu,
    });
    function hidemenu() {
    $('.menu-side').css('left', '-100%');
    }
     
    function showmenu() {
    $('.menu-side').css('left', '0%');
    $('.menu-side__line').addClass('hideextra');
    $('.menu-side__text').addClass('hideextra');
    }

     

    See the Pen by (@) on CodePen

×
×
  • Create New...