Recalculate scrollTo target position during tween

[trych]

Hi there,

I have a setup where I grow section upon clicking on them and scroll them to the top of the window via gsap's scrollTo plugin. Generally this works fine, however, there is an issue with sections that are initially not able to be scrolled to the top (due to their limited height).

It's a bit difficult to explain, but might become obvious once you look at the provided example. When you click on any of the top three sections (red, green, blue), everything works fine, however when you click on either of the bottom sections (yellow, cyan), they do not scroll to the top, as they cannot be scrolled to the top initially. The issue is most obvious when clicking on the yellow section: the section grows to 100vh height, yet is unable to be scrolled to the top.

Now, obviously gsap seems to calculate the target scroll position at the beginning of the animation and then does not update it anymore during tweening. Is there any way to fix this issue by maybe have gsap continously recalculate where the top of the (resizing) element is and adjust the tweening accordingly?

Thanks a lot!

See the Pen eYQKPLW by trych (@trych) on CodePen

[mvaneijgen]

Hi @trych I couldn't get it to work for the last block, but I still wanted to post this here.

 

My go to is always to animate things with GSAP even if it could be done with CSS, because this way I can listen for events to know if they are done for instance, so that is what I did here. I've changed to CSS tween to a timeline (which gets created on load but gets paused) then I .play() that timeline when the correct section is clicked, and reverse it when clicked again. If the animation is done it will scroll to that section. They all work now except the last one and I can't figure out why 😅 I'll ping some one else to see if they know a better solution. 

 

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

[akapowl]

3 hours ago, mvaneijgen said:

They all work now except the last one and I can't figure out why 😅 I'll ping some one else to see if they know a better solution. 

 

Looks like you just forgot to remove the transition form the section element in CSS, and thus it was still interfering, Mitchel.

 

section {
  width: 100%;
  background: red;
  height: 40vh;
  
  cursor: pointer;
  
  transition: height 0.4s;
  
  // &.expanded {
  //   height: 100vh;
  // }
}

With it removed, things work better for me already on the last section.

See the Pen BaGVXzw by akapowl (@akapowl) on CodePen

[mvaneijgen]

Damn, those transitions! 😂

[trych]

Hi there,

thanks a lot for the responses already.

 

Unfortunately the suggested changes are not really a solution to my issue, because they only work due to the scrolling happening after the resizing (which is something that I could also get to work by simply applying a delay to my implemenation). I would need the scrolling and resizing to happen at the same time.

 

So what I am asking about is really, how to continously update / recalculate the target during the tween to have all this happening in one fluid motion.

Does anybody have an idea, how this could be solved?

Thanks!

[mvaneijgen]

16 hours ago, trych said:

which is something that I could also get to work by simply applying a delay to my implemenation

Delays are not robust enough, because the browser could have an hiccup and then it would still not work. Having an onComplete call back is much more robust.

 

Having something continuously check for something is going to require a lot of resources and is not the route I would recommend going down. If it is a must that is happens at the same time I would go the route of calculating all the offsets on page load and then feeding these numbers to the scroll to, you will then also have to increase the body size by the amount of extra space for the last one otherwise the browser could not scroll to the last element, because there would simply be not enough space.

 

Unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations, but this is going to require a lot of custom javascript code which is not something I could help with at the moment. 

 

// Here the route I would go down --------//
// The process could be something like ---//

// Get all sections

// Calculate the scroll to poistion + the extra size they would get 
 
// For the last section also increase the body size by the extra size it would get

// Then on mouse click ------------------//
// Your animations here

Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Hope it helps, happy tweening and good luck! 

 

[trych]

@mvaneijgen Thanks for your response and your advice (and sorry for the late response, I had a vacation get between me and the project).

I solved the issue now by calculating the "missing" extra height of the container (the document.body in this case) and adding it to the body, so element can be scrolled to top.

 

Here is an updated sketch:

See the Pen ZEVYQVr by trych (@trych) on CodePen

 

Upon further fiddling I figured out that I do not even need to calculate the exact size, I can just add any big enough value (so anything bigger than window.innerHeight) temporarily, then it has enough space to scroll and the scrolling can be calculated correctly by the scrollTo plugin.

Thanks for your help everybody!