LolaDany Posted April 7, 2022 Share Posted April 7, 2022 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 More sharing options...
OSUblake Posted April 7, 2022 Share Posted April 7, 2022 Welcome the forums @LolaDany What version of ScrollTrigger are you using? There is a resize bug in the latest one, but it should be resolved in the next version. Link to comment Share on other sites More sharing options...
LolaDany Posted April 7, 2022 Author Share Posted April 7, 2022 i did a yarn add need to check tomorow, do you know how i can also make the font size on scroll smoother and not so agressifve Link to comment Share on other sites More sharing options...
adamatronix Posted August 22, 2022 Share Posted August 22, 2022 Similar issue for me on a pinned section. Was that fix every deployed? "gsap": "npm:@gsap/shockingly@^3.10.4", Link to comment Share on other sites More sharing options...
GreenSock Posted August 22, 2022 Share Posted August 22, 2022 Yep, it was long since deployed. We're on version 3.11.0 right now, FYI. If you need some help, just post a minimal demo and we'll do our best to answer any GSAP-specific questions. Thanks for being a Club GreenSock member, @adamatronix! 💚 Link to comment Share on other sites More sharing options...
adamatronix Posted August 22, 2022 Share Posted August 22, 2022 Hi. I put together a codepen here: See the Pen OJvqXJy by adamatronix (@adamatronix) on CodePen Similar situation where you can resize before the pin but not after. I think it's because I got nested pins. Perhaps you guys can recommend a more elegant solution where I can have it sticky and scrub for a certain duration. Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2022 Share Posted August 23, 2022 Hi there. I don't know what I'm meant to be looking for here I'm afraid. What's the issue, what are you expecting to see and what are the steps to reproduce the issue? Link to comment Share on other sites More sharing options...
adamatronix Posted August 23, 2022 Share Posted August 23, 2022 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. Screen Recording 2022-08-23 at 10.05.34 AM.mov 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 23, 2022 Share Posted August 23, 2022 What if you just use the same trigger rather than a nested one? See the Pen abYxvNK?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
adamatronix Posted August 23, 2022 Share Posted August 23, 2022 Thanks! Should have tried that. Didn't think you could add multiple triggers to the same element. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 24, 2022 Share Posted August 24, 2022 Brilliant, glad to help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now