Jump to content
Search Community

Scroll trigger breaks on resize window / timeline

LolaDany test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

  • 4 months later...

Hi, 

 

So without resizing and scrolling it is working as expected. When you reach the test section it pins, then for a 1000px it'll scrub and the Test will animate to the top, then the whole section just pins for the duration of the page.


However, if you resize after the scrub, the whole thing breaks. The Test labels don't scrub, or it may but they are all in the wrong positions. Definitely the nested triggers causes the issue, but don't know alternative methods to get this effect.

 

 

 

  • Like 1
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...