Gsap timeline is not smooth

[gsapnooby]

I am using tailwind css to create my section layout and trying to animate them using gsap.  As you can see in the shared codepen, there are three cards slightly position away from the top (by design) and when scroll happens they move in the center and occupy horizontal space evenly while maintaining their gaps.   The animation of the cards from their initial state to final state  is absurd. They should start moving together with slight delay to reach in their final position. 

 

Right now all these cards first move in the center and then reposition themselves which is not the intended animation.  

 

Also, I have some nested animation with in the cards so to clean up my code, I was thinking to add the animation using intermediate functions 

 

const tl = gsap.timeline()

 

tl.add(animateSectionText())

tl.add(animateCardsParentContainer())

tl.add(animateCards())

tl.add(animateCardsContent())

 

I was trying this but my animation stopped working. If I takeout my timelines out of those functions and add them directly to timeline then they work but not inside the functions.  

 

See the Pen XWBLjpo?editors=1011 by yumelabs (@yumelabs) on CodePen

[mvaneijgen]

It seems to run fine over here. The only thing is that animating the width and height of elements is not really performant, you could look in to animating a css clip-path or the scale of something, those are much more performant.

 

I also find line 22 - 34 weird in your JS, why animate .fromTo() the same value? Also, GSAP is really smart that if you put numbers in strings see line 40, it will just fix that for you, but you should make the start and end values the same: width: "0", should be width: "0%", than GSAP knows it should include the % in the tween, but personally I like to stay away from animating width and height where I can.

 

Also something you could look in to is the Flip plugin with this you can animate from and two elements based on classes and Flip will figure out all the calculations needed for that. 

 

45 minutes ago, newusergsap said:

Also, I have some nested animation with in the cards so to clean up my code, I was thinking to add the animation using intermediate functions 

 

Are you returning the timeline in your function? If that isn't the issue, please start a new topic with a minimal demo showing the issue.

animateSectionText() {

... timeline code...

return tl;

}

 

Also check out this post if you're looking to improve your GSAP code. Hope it helps and happy tweening! 

 

 

[gsapnooby]

@mvaneijgen Thanks for the reply. As you can see in the codepen demo, the animation is not getting completed in first  scroll but as soon as you do reverse scroll and the do forward scroll animation gets completed. 

 

But, there is another problem occurred, I used the same code in my react where one component is one section, is pinned during the animation which is causing the overlap. 

 

Also, the subtext inside the card is not showing and hiding as intended. They should be visible when cards fully expanded and hidden when they are small. 

[mvaneijgen]

@newusergsap it is better to fork your pen and post it back here (this is also a smart way to work if you don't post here, you'll then have copies of your work where you can fall back on). I was just about to ask you for a new minimal demo when I checked your original pen and saw that everything has updated. 

 

I see you have tried to nest ScrollTriggers, that is not something that is advised. A timeline has one ScrollTrigger and individual tweens on the timeline can't have their own ScrollTriggers (you probably can, but then you'll really need to know what you're doing). At least I've never used it this way, and I find you rarely need more than one ScrollTrigger to get the effect you want. 

 

4 hours ago, newusergsap said:

Also, the subtext inside the card is not showing and hiding as intended. They should be visible when cards fully expanded and hidden when they are small. 

 

Why not also make that part of the timeline? Just animate the text .from() opacity: 0 and they will show and hide with the ScrollTrigger direction. If you don't want them to take up height, position them absolute within the cards. 

 

See the Pen abjgPVx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

For React I'll send you to this post. If you're still stuck I'll advise you to start a new topic with a minimal demo in React, here are the starter templates for that https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

[gsapnooby]

@mvaneijgen Thank you so much.