Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Muhammad Haroon Aslam

Animations are slow

Recommended Posts

i am using gsap basic animation like translations and show or hide but the animation sometime do not go smoothly i don't know if i can post my demo website link but if anyone want to see the web i can comment on this post 

 

chars = mySplitText.chars;
tl.staggerFrom(chars,0.01, {opacity:0, ease: Expo.easeInOut}, 0.11, "+=0.1");
tl.to(skip,1,{display: 'block',ease: Expo.easeIn},2);
tl.to(bodycontent,1,{display:'block'},9);
tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9);
tl.to(txt,.1,{display:'none',ease: Expo.easeIn},9)
tl.to(showafter, 2, {y:-7000,rotation:45,scale:4,ease: Expo.easeIn},9);
tl.to(showafter1, 2, {y:7000,rotation:45,scale:4,ease: Expo.easeIn},9);

tl.to(showafter, 2, {opacity:0,display:'none',ease: Expo.easeIn},10);
tl.to(showafter1, 2, {opacity:0,display:'none',ease: Expo.easeIn},10);
tl.to(body, 1, {overflowY:'auto',ease: Expo.easeIn},10);
tl.to(welcome,2,{display: 'block',opacity:1,ease: Expo.easeIn},10);
tl.to(bodycontent,2,{borderStyle:'solid',borderWidth: '48px',borderColor:'#fff',ease: Expo.easeIn},12);
tl.to(bar,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12);
tl.to(bar2,2,{display:'block',width:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12);
tl.to(bar3,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12);
tl.to(social, 2, {opacity:1,ease: Expo.easeIn},12);
tl.to(skip,1,{display: 'none',ease: Expo.easeIn},12);
tl.to(welcome,1,{display: 'none',opacity:0,ease: Expo.easeIn},12);

tl.to(cloud, 1, {x:-400,y:'15%',position:'fixed',ease: Expo.easeIn},12);
tl.to(cloud, 1, {scale:0.75,ease: Expo.easeIn},12);
tl.from(about, 2, {x:100,ease: Expo.easeIn},12);
tl.to(about, 2, {opacity:1,ease: Expo.easeIn},12);
tl.to(nav,2,{opacity:1,ease: Expo.easeIn},12);
tl.from(nav,2,{x:100,ease: Expo.easeIn},12);

 

Link to post
Share on other sites

What we really need is for you to isolate (or consolidate) the issue down within a simple CodePen.

 

 

  • Like 6
Link to post
Share on other sites

I'm wondering if you're expecting an animation on something like this?

 

tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9);

 

That will take 1 second on the timeline, but won't actually animate. It will just disappear at the end of the tween. Were you perhaps wanting autoAlpha there? That would fade the element and then set the visibility to hidden. I'm just guessing here, but as @Shaun Gorneau mentioned, a demo will be necessary to give you accurate answers.

 

Happy tweening.

  • Like 2
Link to post
Share on other sites

Thanks for the demo, but that is still a whole lot of code to look through. I'm actually not sure what the question is either. You mentioned things don't go smoothly. Do you mean they stutter or don't animate at the correct time? I'm just not clear on the nature of the problem.

 

One thing I do see is a bunch of CSS transitions on elements. Are you perhaps creating a conflict between GSAP and CSS animations? That can definitely lead to things not running smoothly as there would be a fight for control. If you could trim that demo down to just a few elements to isolate the issue, I'm certain we can point you in the right direction.

 

Happy tweening.

:)

 

  • Like 4
Link to post
Share on other sites

FWIW it seems to run fine on my imac and I checked it on an ancient windows laptop I keep around for windows testing and it ran well there too.

 

That machine bogs down pretty easily, if it can handle it I don't see any issues.

 

 

  • Like 1
Link to post
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.

×