Animating hero to another container with - position on screen is weird

[Another pie]

Hello everyone, I'm new to gsap so I need some light here.

 

I'm trying to animate the hero image to fit in the new-hero-container, as you can see so far so good, but the image moves to the container much faster than the scrolling position. I'm trying to figure out how to have it centered both when scrolling down and up (or at least centered as far as possible in this case).

 

I tried using scroll to but I'm too much of a newbie to figure it out myself. The effect I want is similar as on this website.  Any suggestions?

See the Pen zYyWoZg by Sabrina-T (@Sabrina-T) on CodePen

[mvaneijgen]

Hi @Another pie welcome to the forum!

 

The best thing to do with Flip is have it calculate the animation on page load, then it only has to do the animation when you tell it to. 

 

I've flipped (pun intended) some of you're code around and create one of the flips on page load and .add() it's tween to the timeline, now ScrollTrigger can control it as you want it I think, but I can be wrong. Let us know if this is what you are looking for! Happy tweening!

 

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

[Another pie]

Precisely what I was looking for, thank you so much!

[RobertRobles]

I also have a similar situation, is it the right place to ask?

Edit: I have found the solution. Thank you.

[mvaneijgen]

@RobertRobles it is better to open your own topic and reverence this one if you think it is relevant. Also be sure to include a minimal demo with your question

showing what you've already tried, that way we can see your thought process and thus better help you understand the tools!