Jump to content
Search Community

My animations is showed, disappear and then animate.

CreativeSoul test

By CreativeSoul
in GSAP

Moderator Tag
 Share
Go to solution Solved by Carl,

Recommended Posts

CreativeSoul test

CreativeSoul

Posted
Posted

Hi, 


I am fairly new to GSAP and do my own code in general, so this might be a newbie question. 

Nonetheless, i can not figure this out myself. I'm using this little lines of code: 
 

<script>

var tl = gsap.timeline();
tl.from('.anime1', {opacity: 0, duration: 1, y: -50, stagger: 0.6})

</script>

It all works, but the thing is when I load the page all my animations will be showed. Then it will disappear and then start the animation (which looks awful tbh) 

I would attach full code, but this is on WP so i can't. 
 

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey CreativeSoul and welcome to the GreenSock forums.

 

7 minutes ago, CreativeSoul said:

the thing is when I load the page all my animations will be showed

I don't understand what you're saying here. Do you mean when the page loads your elements are visible? If so, that has nothing to do with GSAP specifically. It's because the elements are visible until the JS runs. That's called a flash of unstyled content which we have a video about fixing. Another alternative is to include some JS in the <head> before you content to hide things then have your more full JS afterwards.

 

9 minutes ago, CreativeSoul said:

which looks awful tbh

Are you saying that you think that GSAP is doing something wrong? If so, please make a minimal demo of the issue using something like CodePen so we can fix any issues that exist. If you're just saying the effect doesn't look good to you, making better looking animations comes with practice :) 

  • Like 2
Link to comment
Share on other sites
CreativeSoul test

CreativeSoul

Posted
  • Author
Posted
2 minutes ago, ZachSaucier said:

Hey CreativeSoul and welcome to the GreenSock forums.

 

I don't understand what you're saying here. Do you mean when the page loads your elements are visible? If so, that has nothing to do with GSAP specifically. It's because the elements are visible until the JS runs. That's called a flash of unstyled content which we have a video about fixing. Another alternative is to include some JS in the <head> before you content to hide things then have your more full JS afterwards.

 

Are you saying that you think that GSAP is doing something wrong? If so, please make a minimal demo of the issue using something like CodePen so we can fix any issues that exist. If you're just saying the effect doesn't look good to you, making better looking animations comes with practice :) 

Hi! Thanks for very quick reply! 

No the GSAP looks amazing! But yes, you was understanding it correctly. It loads and display the things before the animation starts. 
Therefore I think it looks awful - the animation itself looks great. Work as i wanted to. 

I'll give the video a look and hope it can help me! Thanks again. 

Link to comment
Share on other sites
CreativeSoul test

CreativeSoul

Posted
  • Author
Posted
10 hours ago, ZachSaucier said:

Hey CreativeSoul and welcome to the GreenSock forums.

 

I don't understand what you're saying here. Do you mean when the page loads your elements are visible? If so, that has nothing to do with GSAP specifically. It's because the elements are visible until the JS runs. That's called a flash of unstyled content which we have a video about fixing. Another alternative is to include some JS in the <head> before you content to hide things then have your more full JS afterwards.

 

Are you saying that you think that GSAP is doing something wrong? If so, please make a minimal demo of the issue using something like CodePen so we can fix any issues that exist. If you're just saying the effect doesn't look good to you, making better looking animations comes with practice :) 

Hi and thanks again.

Yes, the FOUC is the problem. 

Here is the code for the original problem:

See the Pen ZEpNEJK by stefan-hilbert (@stefan-hilbert) on CodePen



Then i tried to fix it with help from the video, but then nothing happens: 

See the Pen wvzbvev by stefan-hilbert (@stefan-hilbert) on CodePen



What am I doing wrong here? 

Link to comment
Share on other sites
  • Solution
Carl test

Carl

Posted
  • Solution
Posted

You have an additional semi-colon ; after stagger:0.6; which is causing an error.

 

It isn't necessary to use opacity and autoAlpha in the same tween. I'm not sure why you switched to using TimelineMax in the second demo. I would recommend sticking with the new gsap.timeline().

 

If you are still beginning with GSAP3 you may find my free course helpful (see signature)

 

 

  • Like 3
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...