jand1 Posted August 19, 2021 Share Posted August 19, 2021 Hi everyone, New to web development and gsap. Made a site for my first client - just having trouble with elements showing first and then the animation would run on page load. I'm sure that when I was testing it on Live Server in VS Code, it wasn't doing it. But now the site is live, everytime I do a hard refresh it would do it. I just want the animation to run on first instance of page load without first showing the elements. not sure if its safe to link the site i made here, but here is the jquery I made along with fullpage.js: If i can paste the site here, please just let me know so you can see. Thank you! afterLoad: function(origin, destination, direction){ if(origin.index !== 0 ){ return null; } const section = destination.item; const hero = section.querySelector("h1"); const heroSpan = section.querySelector("#hero-span"); const heroList = section.querySelectorAll(".hero-list > ul > li"); const tl = new TimelineMax(); const tlSpan = new TimelineMax({delay:0.6}); const tlList = new TimelineMax({delay:0.6}); tl.fromTo(hero, 0.5, {y:'20', opacity: 0}, {y:0, opacity:1}); tlSpan.fromTo(heroSpan, 0.8, {x: '20', opacity: 0, ease:Power2.easeOut}, {x:'0', opacity:1}); tlList.staggerFrom(heroList, 0.5, {x:100, opacity:0, ease:Power2.easeOut}, 0.2); }, onLeave: function(origin, destination, direction){ if (destination.index === 2){ gsap.fromTo('#cursor', {autoAlpha: 0, x:-10}, {autoAlpha: 1, duration: 0.5, repeat: -1, ease: SteppedEase.config(1)}); gsap.to(".typewriter-text", {text: {value: "test heading"}, duration: 2, delay: 0, ease: "none"}) } if (origin.index === 4 && destination.index === 3){ return null; } const section = destination.item; const heroHeaders = section.querySelector(".section-headers"); const tl = new TimelineMax({delay:1.1}); tl.fromTo(heroHeaders, 0.6, {y:'0', opacity: 0}, {y:0, opacity:1}); }, Link to comment Share on other sites More sharing options...
OSUblake Posted August 19, 2021 Share Posted August 19, 2021 Welcome to forums, @jand1 That's just Flash of Unstyled Content (FOUC), and might not be noticeable when working locally because you're not loading files and assets over a network. Also, it looks like you're mixing GSAP's old syntax with the newer one. Please check out the Migration Guide. 5 1 Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 Thank you very much for your reply! I'm not sure if it is FOUC entirely, because it does flash the unstyled, then it flashes styled, and then it runs the animation. This is all done in split seconds but you can see it when you hard refresh the page. I'm not sure if ive orded my styles and scripts in the correct way or if it just needs to be on cloudflare to help it load quickly. Maybe I can PM you our website address for you to have a look? But I'll go through the FOUC thread and see what I can do. Anyway, here is my updated(not sure if I'm 100% correct😅) code: afterLoad: function(origin, destination, direction){ if(origin.index !== 0 ){ return null; } const section = destination.item; const hero = section.querySelector("h1"); const heroSpan = section.querySelector("#hero-span"); const heroList = section.querySelectorAll(".hero-list > ul > li"); const tl = gsap.timeline(); const tlSpan = gsap.timeline({delay:0.6}); const tlList = gsap.timeline({delay:0.6}); tl.fromTo(hero, 0.5, {y:'20', opacity: 0}, {y:0, opacity:1}); tlSpan.fromTo(heroSpan, 0.8, {x: '20', opacity: 0, ease:"power2.out"}, {x:'0', opacity:1}); gsap.from(heroList, {duration:1, x: 100, opacity:0, ease:"power2.out", stagger: {each: 0.2, from: "start", axis:"x"}}); }, onLeave: function(origin, destination, direction){ if (destination.index === 2){ gsap.fromTo('#cursor', {autoAlpha: 0, x:-10}, {autoAlpha: 1, duration: 0.5, repeat: -1, ease: "steps(1)"}); gsap.to(".typewriter-text", {text: {value: "test heading"}, duration: 2, delay: 0, ease: "none"}) } if (origin.index === 4 && destination.index === 3){ return null; } const section = destination.item; const heroHeaders = section.querySelector(".section-headers"); const tl = gsap.timeline({delay:1.1}); tl.from(heroHeaders, 0.6, {y:'0', opacity: 0}, {y:0, opacity:1}); }, }); The only part i couldnt get to work is the typewriter effect. The cursor is not blinking when I change it from "fromTo" to 'from'. It doesn't blink. I tried editing the object lements, but can'tseem to find the answer. Maybe a little tip?😅 tlSpan.fromTo(heroSpan, 0.8, {x: '20', opacity: 0, ease:"power2.out"}, {x:'0', opacity:1}); gsap.from(heroList, {duration:1, x: 100, opacity:0, ease:"power2.out", stagger: {each: 0.2, from: "start", axis:"x"}}); <div class="typewriter"> <h3 class="big-head poppins appear typewriter-text"><!--test heading--></h3><span id="cursor">|</span> </div> Thank you once again! Link to comment Share on other sites More sharing options...
OSUblake Posted August 19, 2021 Share Posted August 19, 2021 3 hours ago, jand1 said: Anyway, here is my updated(not sure if I'm 100% correct😅) code: You don't need to use a stagger object for basic staggers. Using a number is fine. // longer gsap.from(heroList, {duration:1, x: 100, opacity:0, ease:"power2.out", stagger: {each: 0.2, from: "start", axis:"x"}}); // shorter gsap.from(heroList, {duration:1, x: 100, opacity:0, ease:"power2.out", stagger: 0.2 }); And you don't need to use strings for number values. // longer tlSpan.fromTo(heroSpan, 0.8, {x: '20', opacity: 0, ease:"power2.out"}, {x:'0', opacity:1}); // shorter tlSpan.fromTo(heroSpan, 0.8, {x: 20, opacity: 0, ease:"power2.out"}, {x: 0, opacity:1}); 3 hours ago, jand1 said: The only part i couldnt get to work is the typewriter effect. The cursor is not blinking when I change it from "fromTo" to 'from'. It doesn't blink. I tried editing the object lements, but can'tseem to find the answer. Maybe a little tip?😅 Can you make a minimal demo showing the issue? 3 hours ago, jand1 said: I'm not sure if it is FOUC entirely, because it does flash the unstyled, then it flashes styled, and then it runs the animation. This is all done in split seconds but you can see it when you hard refresh the page. I'm pretty sure that's a FOUC issue. The basic idea is that you should set the from values in your CSS because it takes a split second to process JavaScript on load. 2 1 Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 Thank you very much! Ok, I'll follow the FOUC video and see what I can come up with. 15 minutes ago, OSUblake said: Can you make a minimal demo showing the issue? See the Pen rNmXLYZ by jand1 (@jand1) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted August 19, 2021 Share Posted August 19, 2021 Seems to work fine here. See the Pen qBmeamZ by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 Ok, so I tried following the FOUC video guide, but it doesnt seem to run JS. Forgive me for my inexperience. afterLoad: function(origin, destination){ if(origin.index !== 0 ){ return null; } const section = destination.item; const hero = section.querySelector("h1"); const heroSpan = section.querySelector("#hero-span"); const heroList = section.querySelectorAll(".hero-list > ul > li"); const tl = gsap.timeline(); const tlSpan = gsap.timeline({delay:0.6}); const tlList = gsap.timeline({delay:0.6}); function init() { tl.from(hero, 0.5, {y:'20'}, {y:0, autoAlpha:0}); tlSpan.from(heroSpan, 0.8, {x: 20, ease:"power2.out"}, {x: 0, autoAlpha:0}); tlList.from(heroList, {duration:1, x: 100, autoAlpha:0, ease:"power2.out", stagger: 0.2 }); } window.addEventListener("load", function(event){ init(); }); }, When I hover over 'event', VS code tells me: Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 7 minutes ago, OSUblake said: Seems to work fine here. It did! Thank you, you're awesome! Link to comment Share on other sites More sharing options...
OSUblake Posted August 19, 2021 Share Posted August 19, 2021 1 minute ago, jand1 said: When I hover over 'event', VS code tells me: That's not an error. It's basically telling you can delete the event keyword from your code because you aren't using it. window.addEventListener("load", function() { init(); }); // shorter window.addEventListener("load", init); To prevent FOUC, you need to set the start values in your CSS. // css .foo { opacity: 0; } // js gsap.fromTo(".foo", { opacity: 0 }, { opacity: 1 }); // or just do a to gsap.to(".foo", { opacity: 1 }); 2 Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 I've tried to follow the video where it uses autoAlpha. So i've set the css visibility: hidden. But when I inspect the element, it doesn't seem to have ran JS as no inline style is being set (which should be 'opacity:1, visibility:inherit' according to the video). Here's my current code: afterLoad: function(origin, destination){ if(origin.index !== 0 ){ return null; } const section = destination.item; const hero = section.querySelector("h1"); const heroSpan = section.querySelector("#hero-span"); const heroList = section.querySelectorAll(".hero-list > ul > li"); const tl = gsap.timeline({opacity:0}); const tlSpan = gsap.timeline({delay:0.6}); const tlList = gsap.timeline({delay:0.6}); function init() { tl.from(hero, 0.5, {y:'20'}, {y:0, autoAlpha:0}); tlSpan.from(heroSpan, 0.8, {x: 20, ease:"power2.out"}, {x: 0, autoAlpha:0}); tlList.from(heroList, {duration:1, x: 100, autoAlpha:0, ease:"power2.out", stagger: 0.2 }); } window.addEventListener("load", init); }, I'm wondering if CSS Plugin is already included in the gsap.min.js? I see that autoAlpha is part of that CSS Plugin...🤔 Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 Yes, CSSPlugin is already in the core. You don't need to load anything else. It's very difficult to troubleshoot blind. My guess is that your function isn't getting called. Try putting a console.log() right above your tween and see if it hits that. If you still need help, please provide a minimal demo and we'd be happy to take a peek. 1 Link to comment Share on other sites More sharing options...
jand1 Posted August 19, 2021 Author Share Posted August 19, 2021 (edited) 1 hour ago, GreenSock said: Yes, CSSPlugin is already in the core. You don't need to load anything else. It's very difficult to troubleshoot blind. My guess is that your function isn't getting called. Try putting a console.log() right above your tween and see if it hits that. If you still need help, please provide a minimal demo and we'd be happy to take a peek. Hi! thank you for getting back to me. I tried to make a demo as best as i can, what's funny is it seems to be working fine, except the H1. See the Pen jOmgBPp by jand1 (@jand1) on CodePen I did try to do a console.log() just inside the function, and you're right, it isnt being called. Putting the console log anywhere outside the function does work. What am I doing wrong...hmmm... I have just started web development and JS a month ago so unfortunately I'm not good enough to troubleshoot completely the site. Not sure if I can PM you the live site and you can look from there? edit* having 'scrolloverflow:true' seems to stop it from running. dont know why though. https://github.com/alvarotrigo/fullPage.js/#vanilla-js-example-with-all-options Edited August 19, 2021 by jand1 seem to have found the culprit Link to comment Share on other sites More sharing options...
GreenSock Posted August 19, 2021 Share Posted August 19, 2021 You've got errors in your code - it looks like maybe you're trying to do a .fromTo() or something? You've got too many parameters: // BAD tl.from(hero, 0.5, {y:'20'}, {y:0, autoAlpha:0}); // GOOD tl.from(hero, 0.5, {y:20, autoAlpha:0}); // ALSO GOOD tl.fromTo(hero, 0.5, {y: 20, autoAlpha: 0}, {y: 0, autoAlpha: 1}); 1 Link to comment Share on other sites More sharing options...
jand1 Posted August 20, 2021 Author Share Posted August 20, 2021 3 hours ago, GreenSock said: You've got errors in your code - it looks like maybe you're trying to do a .fromTo() or something? You've got too many parameters: // BAD tl.from(hero, 0.5, {y:'20'}, {y:0, autoAlpha:0}); // GOOD tl.from(hero, 0.5, {y:20, autoAlpha:0}); // ALSO GOOD tl.fromTo(hero, 0.5, {y: 20, autoAlpha: 0}, {y: 0, autoAlpha: 1}); Changed to this, a little bit better? const tl = gsap.timeline(); const tlSpan = gsap.timeline(); const tlList = gsap.timeline(); function init() { tl.from(hero, {duration: 1, y:20, autoAlpha:0, ease:"power2.out"}); tlSpan.from(heroSpan, {duration:0.8, x: 20, autoAlpha:0, ease:"power2.out", delay: 0.6}); tlList.from(heroList, {duration:1, x: 100, autoAlpha:0, ease:"power2.out", stagger: 0.2, delay:0.6}); } As for the fullpage.js stopping the animation from running when scrollOverflow is on, I'll take it to his Support page on github. Thanks for the help guys! Link to comment Share on other sites More sharing options...
GreenSock Posted August 20, 2021 Share Posted August 20, 2021 3 hours ago, jand1 said: Changed to this, a little bit better? Yep. But if you're only adding one tween to a timeline, there's really no point in even creating a timeline. Just gsap.from() instead. It doesn't hurt anything to create the timelines - it's just extra code you don't need. Good luck! Link to comment Share on other sites More sharing options...
Solution jand1 Posted August 20, 2021 Author Solution Share Posted August 20, 2021 (edited) 7 hours ago, GreenSock said: Yep. But if you're only adding one tween to a timeline, there's really no point in even creating a timeline. Just gsap.from() instead. It doesn't hurt anything to create the timelines - it's just extra code you don't need. Good luck! Aaahh! Of course! Definitely one thing I'm learning, especially with JS, is that there's always a way to simplify code. Thanks for everyone's assistance! gsap.from("h1", {duration: 0.7, y:20, autoAlpha:0, ease:"power2.out"}); gsap.from("#hero-span", {duration:0.8, x: 20, autoAlpha:0, ease:"power2.out", delay: 0.8}); gsap.from(".hero-list ul li", {duration:1, x: 100, autoAlpha:0, ease:"power2.out", stagger: 0.2, delay:0.8}); *edit Added the animation inside the afterRender callback event and removed function as the callback works the same. https://github.com/alvarotrigo/fullPage.js#afterload-origin-destination-direction Edited August 20, 2021 by jand1 found a solution 2 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