Next.js & GSAP. How to slide up the height of div

[jnemec 3 Likes (Newbie)]

I was helped the other day, but I have run into another problem. In my link below, when you hover over a column, I have the p tag text sliding up, but if the text is too long, then it gets cut off. How would I make it so that I can use the height of the each columns text as the distance to slide up, so that it all fits in the column?

 

Click in the "components" folder and select the "Hero.tsx" file to view what I have done so far.

https://codesandbox.io/p/sandbox/gsap-columns-rgi7s2?file=%2Fcomponents%2FHero.tsx

[Cassie 5,370 Likes (Superhero)]

Heya!

 

You're in JS-land with GSAP so you can use any JS method to get height or width or any other value and just plug that right into your tween.

 

e.g. offsetheight
https://www.w3schools.com/jsref/prop_element_offsetheight.asp

I've also removed overflow on your container so you can see the text.

https://codesandbox.io/p/sandbox/gsap-columns-forked-gnp5z5?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A16%2C"endLineNumber"%3A65%2C"startColumn"%3A16%2C"startLineNumber"%3A65}]

Hope this helps!

[jnemec 3 Likes (Newbie)]

1 hour ago, Cassie said:

Heya!

 

You're in JS-land with GSAP so you can use any JS method to get height or width or any other value and just plug that right into your tween.

 

e.g. offsetheight
https://www.w3schools.com/jsref/prop_element_offsetheight.asp

I've also removed overflow on your container so you can see the text.

https://codesandbox.io/p/sandbox/gsap-columns-forked-gnp5z5?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A16%2C"endLineNumber"%3A65%2C"startColumn"%3A16%2C"startLineNumber"%3A65}]

Hope this helps!

Yes, that works great! Thank you! One more questions. Would I need to add an animation to the entire column so that it grows to fit the text? I added more text to the last column and it is overflowing into the second column instead of growing to fit. Any ideas?

 

https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.tsx&selection=[{"endColumn"%3A7%2C"endLineNumber"%3A16%2C"startColumn"%3A7%2C"startLineNumber"%3A16}]

[Rodrigo 5,382 Likes (Superhero)]

Hi,

 

This is more related with CSS than anything else, these styles seems to solve that:

.body {
  position: absolute;
  margin-bottom: 0;
  line-height: 1.7;
  font-weight: 600;
  font-size: clamp(1rem, 0.15vw + 0.97rem, 1.13rem);
  color: #fff;
  opacity: 0;
  width: 100%;
  left: 0;
  padding: 5vw 3.5vw;
  overflow-wrap: break-word;
}

 

Hopefully this helps.

Happy Tweening!

[jnemec 3 Likes (Newbie)]

19 hours ago, Rodrigo said:

Hi,

 

This is more related with CSS than anything else, these styles seems to solve that:

.body {
  position: absolute;
  margin-bottom: 0;
  line-height: 1.7;
  font-weight: 600;
  font-size: clamp(1rem, 0.15vw + 0.97rem, 1.13rem);
  color: #fff;
  opacity: 0;
  width: 100%;
  left: 0;
  padding: 5vw 3.5vw;
  overflow-wrap: break-word;
}

 

Hopefully this helps.

Happy Tweening!

I appreciate the help, but it's still overflowing for me.

https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.module.scss&selection=[{"endColumn"%3A19%2C"endLineNumber"%3A40%2C"startColumn"%3A19%2C"startLineNumber"%3A40}]

[Rodrigo 5,382 Likes (Superhero)]

Hi,

 

I think we're talking about different things when we're referring to overflowing here, this is what I'm seeing:

https://i.imgur.com/ECZSKG2.mp4

 

What exactly is the issue in this particular case?

 

That is exactly how I expect this to behave, so clearly I'm missing something here 🤷‍♂️

 

Happy Tweening!

[jnemec 3 Likes (Newbie)]

9 minutes ago, Rodrigo said:

Hi,

 

I think we're talking about different things when we're referring to overflowing here, this is what I'm seeing:

https://i.imgur.com/ECZSKG2.mp4

 

What exactly is the issue in this particular case?

 

That is exactly how I expect this to behave, so clearly I'm missing something here 🤷‍♂️

 

Happy Tweening!

That is my fault for not being clearer. I have added a media query to my sandbox. At <768px the columns will stack on top of each other to create three rows. I'm wanting the parent elements to expand with the text that slides up. In my current sandbox, the third row overflows and covers the other two rows. How can I make it so that the rows parent expands to match the amount of text? 

https://codesandbox.io/p/sandbox/gsap-columns-forked-c87wb4?file=%2Fcomponents%2FHero.module.scss&selection=[{"endColumn"%3A19%2C"endLineNumber"%3A40%2C"startColumn"%3A19%2C"startLineNumber"%3A40}]

[Rodrigo 5,382 Likes (Superhero)]

11 minutes ago, jnemec said:

In my current sandbox, the third row overflows and covers the other two rows. How can I make it so that the rows parent expands to match the amount of text? 

You should start tinkering with the calculations in order to determinate how much that particular row has to expand, which most likely implies that the other two have to contract in order to accommodate the one that is expanding. You have to go back to the drawing board and put some pen in paper in order to figure this out. Unfortunately this kind of complex logic is beyond the help we can provide in these free forums, we just don't have the time resources to solve this kind of complex scenarios for our users, sorry. You can contact us for paid consulting or post in the Jobs & Freelance forums.

 

My two cents on the subject that this stems from a lack of consideration when creating the HTML/CSS of your setup. For example I would've never used position absolute for the paragraph content. I would use a container for the text on each column stacked normally and move them to the bottom of the element and then use GSAP to move it until you can see just the title and then move them up using yPercent. If the content is more than the height of the element, then add a button at the top and bottom to show more or give a scrollable area to the content. Even further don't allow that much content in those sections. As you can see this is something that is related to app architecting/design and implementation, not a GSAP specific issue. GSAP is doing exactly what is supposed to do.

 

Sorry I can't be of more assistance, hopefully another user can chime in and provide some guidance/pointers in this case.

Happy Tweening!