Jump to content
Search Community

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

Another pie test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
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.
  • Create New...