Animations are slow

[Muhammad Haroon Aslam 0 Likes (Newbie)]

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

 

[Shaun Gorneau 1,837 Likes (Superhero)]

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

 

 

[PointC 11,423 Likes (Superhero)]

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.

[Muhammad Haroon Aslam 0 Likes (Newbie)]

i can give you the link i tried to make the pen but i don't know how to get the images 

Demo Website

[Muhammad Haroon Aslam 0 Likes (Newbie)]

See the Pen XEpbWW by anon (@anon) on CodePen

Pen

This is the best i could do on codepen

 

[PointC 11,423 Likes (Superhero)]

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.

 

[Visual-Q 828 Likes (Leader)]

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.