Share Posted March 19, 2018 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
Share Posted March 19, 2018 What we really need is for you to isolate (or consolidate) the issue down within a simple CodePen. 6 Link to post Share on other sites
Share Posted March 19, 2018 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. 2 Link to post Share on other sites
Author Share Posted March 19, 2018 i can give you the link i tried to make the pen but i don't know how to get the images Demo Website Link to post Share on other sites
Author Share Posted March 19, 2018 See the Pen XEpbWW by anon (@anon) on CodePen Pen This is the best i could do on codepen Link to post Share on other sites
Share Posted March 19, 2018 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. 4 Link to post Share on other sites
Share Posted March 19, 2018 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. 1 Link to post Share on other sites