Jump to content
Search Community

Help - The animation loads slow

sywei1 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

I'm an absolute beginner in this. Was trying to create a page with a simple animation and a menu toggle button.

The animation plays fine, but the menu button has to click twice for it to work, and it loads extremely slow, it almost like it doesn't work(have to wait quite a while). I was trying to use the playback and reverse functions for the button. Does anybody know why this happens?

 

Here's the page:http://siyingwei.com/test2018/

 

Thank you so much for the help!! Really appreciate your time!

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

In cases like this it would really help both you and us if you create a reduced test case using CodePen.

Usually in this process of reducing the code you'll stumble into the error, and if not we have something that we can tweak and test.

 

more info here: 

 

 

After digging through your live site I found the javascript.

 

I'm curious why you are using a position parameter of "-=7.7" seconds.

 

tlMenu 
            .set($('.menu-click a'), {zIndex:111})
            .to($menuClick, 0.5, { xPercent: '-=100', ease: Power3.easeInOut},'-=7.7')
            .to($menuBar, 0.5, { xPercent: '-=0', ease: Power3.easeInOut},'-=7.7')
            .fromTo($menuWork, 0.5, {autoAlpha: 0, xPercent: '50'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut}, '-=7.7')
            .fromTo($menuAbout, 0.5, {autoAlpha: 0, xPercent: '45'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut}, '-=7.6')
            .fromTo($menuContact, 0.5, {autoAlpha: 0, xPercent: '40'}, {autoAlpha: 1, xPercent: '-100', ease: Power3.easeInOut }, '-=7.5')

 

That means you are trying to add these tweens 7.7 seconds before the timeline begins.

I would remove all those and see if you get better results.

 

Here is an article explaining the position parameter https://greensock.com/position-parameter

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you for the quick reply Carl!

 

I think I just fixed it by shortening the seconds for position parameter.

 

And thanks for the suggestion of using Codepen,

will use it next time when explaining things.

 

Hope you have a wonderful weekend!

 

 

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...