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');
}
