Animate from off canvas back to center of section?

[mattdown]

Hi,

I was looking for a bit of advice on the best way to approach a page loading animation.

The page consists of a simple 100vh section that contains a centred block and inside that block, there is a logo and some text. The logo will be a set width (only changing slightly over larger viewports).

The aim is that on page load, the logo and text container is positioned off the bottom of the grey section but with just the logo (lime green block) poking up and visible from the bottom and then after a few seconds, it will animate back into the center of the section. The logo however, needs to start as wide as the users screen and then shrink back to it's specified size as the parent container animates back to the center of the section.

In this codepen, I've built in a temporary toggle which just adds a class to place the container off the bottom of the section and also enlarge the logo. This is obviously not correct as the logo is being pushed off as well.

My question is whether using a gsap.set() woulld be the best way to do the initial correct placement off canvas and whether it would be able to accurately calculate the amount of initial vertical movement needed to display the green block (logo). Once that has been set, would it be best to animate using css 'top' positions etc or accurate y positions?

Any advice / thoughts on this would be really appreciated.

See the Pen PoGzRGm by mattdown2478910 (@mattdown2478910) on CodePen

[ZachSaucier]

Hey mattdown. I'm having a hard time visualizing exactly what you need. Are you saying that you only need an animation when the page loads? Or is there some other condition where the same animation should play? 

 

If only on load, I would think it would make sense to simply use a .from() and calculate the position of where things need to be. And yes, you can calculate how far the container should be displaced to keep the logo still in the viewport.  When animating you should avoid using non-performant properties (like top). Try to stick to transforms instead (like y in GSAP).

[mattdown]

I've been having a go at this today but it's still nowhere near good enough.

The inital load of this updated Codepen shows the elements positioned where they need to be (centred in the section on both axis). When the toggle button is clicked, the text and image container gets positioned off of the bottom with only the now enlarged logo (green area) poking up from the bottom. It then needs to animate back to the exact original position.

You can see that I've been trying all manor of things such as recording initial position tops etc. but I'm feeling that's the wrong way to go and there must be an easier way of working out where it needs to move back to.

See the Pen yLaJRGv by mattdown2478910 (@mattdown2478910) on CodePen

[ZachSaucier]

Why are you absolutely positioning your content? There are other ways of centering things (with CSS grid, flexbox, etc.) that will likely make things a bit easier to keep things responsive. As is if you resize the screen to be smaller the content no longer fits on the page. It also makes your calculations more difficult because then you have to worry about transforms.

 

Since you need to do a state change (the container's width changes size, the image changes size, the position is changed) it'd probably be best to do a FLIP transition. GSAP is actually coming out with a FLIP plugin but it will be for Shockingly Green or greater Club GreenSock members. If you join today you will get access to the private beta for it!