Jump to content
Search Community

Elements visible before animation

jand1 test
Moderator Tag

Go to solution Solved by jand1,

Recommended Posts

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

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

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.

 

  • Like 2
  • Haha 1
Link to comment
Share on other sites

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:

error.png.6f1c1867f6c9e957edb956987c3fee33.png

 

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

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. 

  • Like 1
Link to comment
Share on other sites

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 by jand1
seem to have found the culprit
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

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

  • Solution
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 by jand1
found a solution
  • Like 2
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...