romain.gr Posted March 20, 2020 Share Posted March 20, 2020 Hi, I've been struggling for quite a while now (few hours) on that issue and it doesn't make any sense. here is the website with the issue : http://romaingranai.be/pb/about.html First you have the first animation (logo, nav and footer) then, when you 'keydown' or 'scrolldown' (with the console open), you will see a console log(Allow scroll : true), the problem is that console log should come AFTER the second animation fires (triggered by the keydown or mousewheel). I've tried to call the function at the end of the using .call() or .add() without success neither. You can see the correct animation if, from the about section you scroll up to the first screen and then scroll down again and then it works properly. I don't understand at all what's going wrong. The timeline is the homeToAbout : Thank you here is the code: var homeAnimIsFinished = false; /// $('#fullpage').fullpage({ scrollingSpeed: 1000, touchSensitivity: 2000, easingcss3: 'cubic-bezier(0.58, 0.56, 0.39, 0.97)', onLeave (origin, destination, direction){ if(origin.index < destination.index){ // scroll down $(destination.item).prevAll().removeClass('up down').addClass('up'); $(destination.item).removeClass('up down').addClass('down'); $(destination.item).nextAll().removeClass('up down').addClass('down'); }; if(origin.index > destination.index){ // scroll up $(destination.item).nextAll().removeClass('up down').addClass('down'); $(destination.item).removeClass('up down').addClass('up'); $(destination.item).prevAll().removeClass('up down').addClass('up'); } if(origin.index <= 3 && destination.index == 4){ var animTitle = gsap.timeline({delay: .75}); animTitle.from($('.section--investment--1 h2 span'), {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut, stagger:{ each: .2 }}); } $('.nav a').parent('li').removeClass('active'); var section = $(destination.item).data('section'); $('[data-section-name="'+ section +'"]').parent('li').addClass('active'); var top = $('nav').find('li.active').offset().top - 50; $('.nav').css('--arrow-top', top + 5 + 'px'); }, afterLoad(origin, destination, direction) { if(origin.index > 0 && destination.index == 0){ fullpage_api.setAllowScrolling(false); fullpage_api.setKeyboardScrolling(false); homeToAbout.restart().pause(); console.log('now'); } } }); fullpage_api.setAllowScrolling(false); fullpage_api.setKeyboardScrolling(false); function setScrollTrue(){ fullpage_api.setAllowScrolling(true); fullpage_api.setKeyboardScrolling(true); console.log('Allow scroll : True'); }; function goToAboutSilent(){ fullpage_api.silentMoveTo(2) }; function setOpenAnimFinished(){ homeAnimIsFinished = true; }; var homeToAbout = gsap.timeline({paused: true, onComplete: setScrollTrue}); var openAnim = gsap.timeline({paused: true, onComplete: setOpenAnimFinished}); homeToAbout .to('.transition-about', 2, {autoAlpha: 1, display: 'block'}) .set('h1', {transition: 'none', autoAlpha: 0, y: '100px'}) .call(goToAboutSilent) .to('.transition-about', 2, {top: '30%', left: '70%', width: '40vh', height: '50vh', ease: Expo.easeInOut}) .set('.transition-about', {autoAlpha: 0, display: 'none'}) .to('h1', 3, {autoAlpha: 1, y: 0, ease: Expo.easeInOut}, '-=1.25') .set('h1', {clearProps: 'all'}); openAnim.to('.curtain', .5, {autoAlpha: 0, display: 'none'}) .from($('.triangles polygon'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, stagger: { from: 'center', amount: .5 }}) .from($('.logo-text .cls-1'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, delay: -5, stagger: { from: 'center', amount: .5 }}) .from('.footer', {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut}, '-=3') .from($('.nav li'), {autoAlpha: 0, x: '-20px', duration: 2, ease: Power4.easeOut, stagger: { each: .2, }}, '-=3') .set('.footer', {clearProps: 'all'}) .add(function(){ $('.footer').addClass('footer--hidden'); $('.nav').addClass('nav--active'); }, '+=.1'); openAnim.play(); $('html').on('mousewheel', function(event) { if(event.deltaY < -10 && $('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){ homeToAbout.play(); } }); $(window).on('keydown', function(){ if($('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){ homeToAbout.play(); }; }); $('.section--dualscreen__right').on('click', function(e){ e.preventDefault(); e.stopPropagation(); $(this).parents('.section').addClass('section--dualscreen--open'); }); $('.show-more a').on('click', function(e){ e.preventDefault(); e.stopPropagation(); if(!$(this).parents('.section').hasClass('section--dualscreen--open')){ $(this).parents('.section').addClass('section--dualscreen--open'); } else { $(this).parents('.section').removeClass('section--dualscreen--open'); } }); $('.section--dualscreen__left').on('click', function(){ $(this).parents('.section').removeClass('section--dualscreen--open'); }); $('[data-screen]').on('click', function(e){ console.log('click'); var screen = $(this).data('screen'); e.preventDefault() fullpage_api.moveTo(screen); if($(this).hasClass('about') && $('body').find('.section.active').hasClass('section--home')){ homeToAbout.play(); } }); Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 20, 2020 Share Posted March 20, 2020 Hey romain. That's a good bit of code to wade through, especially on a live site. Can you please create a minimal demo of the issue using something like CodePen? I think that will help you think through it and also make it easier for us to help you. The thread below talks about how to do so: Link to comment Share on other sites More sharing options...
romain.gr Posted March 20, 2020 Author Share Posted March 20, 2020 That's actually the part of the code used for the animation : I just want to know why the function setScrollTrue() is fired at the beginning of the homeToAbout timeline, even thought it's set to fire onComplete, can you see any writing mistake? somewhere? I'm going to create a Codepen but from a first view, do you have any idea? var homeAnimIsFinished = false; /// $('#fullpage').fullpage({ scrollingSpeed: 1000, touchSensitivity: 2000, easingcss3: 'cubic-bezier(0.58, 0.56, 0.39, 0.97)' }); fullpage_api.setAllowScrolling(false); fullpage_api.setKeyboardScrolling(false); function setScrollTrue(){ fullpage_api.setAllowScrolling(true); fullpage_api.setKeyboardScrolling(true); console.log('Allow scroll : True'); }; function goToAboutSilent(){ fullpage_api.silentMoveTo(2) }; function setOpenAnimFinished(){ homeAnimIsFinished = true; }; var homeToAbout = gsap.timeline({paused: true, onComplete: setScrollTrue}); var openAnim = gsap.timeline({paused: true, onComplete: setOpenAnimFinished}); homeToAbout .to('.transition-about', 2, {autoAlpha: 1, display: 'block'}) .set('h1', {transition: 'none', autoAlpha: 0, y: '100px'}) .call(goToAboutSilent) .to('.transition-about', 2, {top: '30%', left: '70%', width: '40vh', height: '50vh', ease: Expo.easeInOut}) .set('.transition-about', {autoAlpha: 0, display: 'none'}) .to('h1', 3, {autoAlpha: 1, y: 0, ease: Expo.easeInOut}, '-=1.25') .set('h1', {clearProps: 'all'}); openAnim.to('.curtain', .5, {autoAlpha: 0, display: 'none'}) .from($('.triangles polygon'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, stagger: { from: 'center', amount: .5 }}) .from($('.logo-text .cls-1'), {autoAlpha: 0, duration: 5, ease: Power4.easeOut, delay: -5, stagger: { from: 'center', amount: .5 }}) .from('.footer', {autoAlpha: 0, y: '20px', duration: 2, ease: Power4.easeOut}, '-=3') .from($('.nav li'), {autoAlpha: 0, x: '-20px', duration: 2, ease: Power4.easeOut, stagger: { each: .2, }}, '-=3') .set('.footer', {clearProps: 'all'}) .add(function(){ $('.footer').addClass('footer--hidden'); $('.nav').addClass('nav--active'); }, '+=.1'); openAnim.play(); $('html').on('mousewheel', function(event) { if(event.deltaY < -10 && $('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){ homeToAbout.play(); } }); $(window).on('keydown', function(){ if($('body').find('.section.active').hasClass('section--home') && homeAnimIsFinished){ homeToAbout.play(); }; }); Link to comment Share on other sites More sharing options...
romain.gr Posted March 20, 2020 Author Share Posted March 20, 2020 Here is the Codepen, it works perfectly, it's the exact same code, I have just copy/past everything. I don't undertsand See the Pen wvaxRQr?editors=0010 by romaingranai (@romaingranai) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 20, 2020 Share Posted March 20, 2020 3 minutes ago, romain.gr said: Here is the Codepen, it works perfectly, it's the exact same code, I have just copy/past everything. I don't undertsand To fix error like this, try cutting things out, piece by piece, until you have only the relevant parts. Then continue cutting things away until you figure out exactly what is causing the issue 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 20, 2020 Share Posted March 20, 2020 Also make sure you're using the most up to date version of GSAP in your project. I see that you're loading the most recent (3.2.5) in the CodePen so that could be a contributing factor. 1 Link to comment Share on other sites More sharing options...
PointC Posted March 20, 2020 Share Posted March 20, 2020 3 minutes ago, ZachSaucier said: To fix error like this, try cutting things out, piece by piece, until you have only the relevant parts. Good advice. I usually try to cut things in half. Chop off the bottom 50% of code - no problems - okay it must be in the other half. Then cut that problematic chunk of code in half and so on... Might take a little while, but you'll find it. The only other thing I thought of was setting the progress() quickly to 1 and back to 0 without suppressing events. I don't see that anywhere in the code, but maybe it's a piece we can't see. Happy bug hunting. 3 Link to comment Share on other sites More sharing options...
romain.gr Posted March 20, 2020 Author Share Posted March 20, 2020 Ok so it looks like it was the gsap version the problem, I was using the 3.0.5 and in the pen it's the 3.2.5, but why? is there something in my code that might work with the newer version of gsap and not with the 3.0.5? I'm really confused now, but still thank for helping me, I've been re-reading my code and actually my logic was good. Thanks a lot, but if you could (if possbile obviously) explain me what could be the problem (from my code point of view) with gsap 3.0.5 and working with the 3.2.5, I would be gratefull. Link to comment Share on other sites More sharing options...
romain.gr Posted March 20, 2020 Author Share Posted March 20, 2020 I actually removed few times not important things and reduced stuff to the minimum and the issue was still happening, but yes good advice indeed Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 20, 2020 Share Posted March 20, 2020 1 minute ago, romain.gr said: is there something in my code that might work with the newer version of gsap and not with the 3.0.5? Yes, there was some bug in GSAP that has been fixed since 3.0.5 evidently. There have been several bug fixes since then. 1 1 Link to comment Share on other sites More sharing options...
romain.gr Posted March 20, 2020 Author Share Posted March 20, 2020 Great job then 1 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