vicmortelmans

TweenLite scrollTo is messed up by simultaneous height animation

Recommended Posts

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
 

Share this post


Link to post
Share on other sites

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.

:)

 

  • Like 2

Share this post


Link to post
Share on other sites

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:

 

 

Best regards,

Vic

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi @vicmortelmans

 

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

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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. 

 

 

I hope you can reproduce this behaviour?

 

best regards,

Vic

Share this post


Link to post
Share on other sites

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.

 

 

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.

 

 

  • Like 5

Share this post


Link to post
Share on other sites

Hi Sahil,

 

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

 

Best regards,
Vic

  • Like 1

Share this post


Link to post
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.