TweenLite scrollTo is messed up by simultaneous height animation

[vicmortelmans]

Hi,

 

I have two animations that should run simultaneously: 

 

1. reducing an element's height to 0
2. scrolling to a certain position, to align a certain element to the top of the screen. Note that this element is *after* the element in animation 1

 

I've calculated the target position for scrolling based on the document *after* the first element's height is reduced to 0, and I also tried the animation with target position for scrolling based on the document *before* the element's height is reduced to 0, but somehow the proper position is never reached.

 

I have also tried to provide the scrolling animation with the id of the element that should align to the top of the screen, that doesn't work either.

 

When I delay the second animation until the first has finished, it is working.

 

How can both animations be achieve simultaneously?

 

Here's the code for my two animations (with the delay in the second animation, which I want to avoid):
 

  TweenLite.to(contentToHide,1,{height:0}); // animation 1
  TweenLite.to(window,1,{delay: 1, scrollTo:Math.max(0, scrollReference + scrollCorrection)}); // animation 2

 

Best regards,

Vic
 

[PointC]

Hi @vicmortelmans

 

Welcome to the forum.

 

I'm not sure I completely follow your question, but I'm wondering if you may need to use an offsetY value to have both tweens play at the same time. You mentioned that it all works right if the first tween finishes before the second starts so if you can use the starting height value of that contentToHide element as a y offset in your scroll tween it may work for you. More info in the docs:

 

https://greensock.com/docs/Plugins/ScrollToPlugin

 

I'm just guessing based on the code you posted, but if you could create a demo, it would be much easier to troubleshoot the issue. Here's some info about that:

Happy tweening and welcome aboard.

 

[vicmortelmans]

Hi, thanks for the fast feedback!

 

I've tried to make a demo, but for some reason the scrollTo animation isn't doing anything in CodePen. I suspected the 'window' element to be the problem, but I replaced it by a wrapper div with fixed height without success... Still maybe it will better illustrate the purpose:

 

See the Pen Zvedxv by vicmortelmans (@vicmortelmans) on CodePen

 

Best regards,

Vic

[Sahil]

You need scrollTo plugin for it to work.

 

In demo you can see that I am passing id of second row as string and it stops at the right position. I re-read your question couple of times and it seems you are trying to achieve something similar to this. So you just need to pass id of the element until which you want to scroll. Does that help? If your implementation is different than this, please post an updated demo.

 

See the Pen baqXLv?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[lennco]

Hi @vicmortelmans

 

I put together an example on how to combine some simultaneous tweens, hopefully matching (...) the scenario described in your post.

 

See the Pen YYZmqw by lennco (@lennco) on CodePen

 

[vicmortelmans]

Hi,

 

I've put together another demo where it seems to go wrong. I'm now using the element id for the scrollTo target. Note that it only goes wrong when the disappearing element is *before* the element that must be scrolled to. 

 

See the Pen Zvedxv by vicmortelmans (@vicmortelmans) on CodePen

 

I hope you can reproduce this behaviour?

 

best regards,

Vic

[Sahil]

Well problem is that when you animate element above target and reduce height, it offsets scrollTo's target location. So assuming you don't really need to do animation as it is not visible anyway, you can use following method so you won't see any jumps.

 

See the Pen ZvKbJX?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Otherwise you will just have to constantly update target using onUpdate callback so you won't see any jumps, but still it will have some awkward behavior depending on height reduction and position of elements.

 

See the Pen ZvKbva?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[vicmortelmans]

Hi Sahil,

 

thanks! That's a very reasonable solution for my scenario!

 

Best regards,
Vic