Jump to content
Search Community

Animations are slow

Muhammad Haroon Aslam 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

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