Jump to content
Search Community

Change Position and Center Absolute Issue

d1ch0t0my test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

 

I'm trying to work out how to move an element from the normal flow into the absolute center of the viewport. You can see what I'm trying to achieve here:

 

 

...but the problem is that:

 

a ) as soon as the position is changed to absolute it jumps out of position (obviously ;P)

b ) the remaining elements shift to accommodate the space left behind by the animating element.

 

Basically I want everything to stay in place except the div I'm animating and I want it to animate from its existing position not the position it then takes up once the position is switched to absolute.

 

Any advice on how best to achieve this would be much appreciated. Many thanks.

See the Pen gMbxEy by anon (@anon) on CodePen

Link to comment
Share on other sites

Hmm looks like I spoke too soon. I've been playing with this for a few hours but my main problem is that if the page is any longer than 100% of viewport then the divs don't work properly they just jump. I've made  a minor adjustment to a fork of your codepen to show the issue:

 

See the Pen vKEdOb by anon (@anon) on CodePen

 

I'm obviously missing something glaringly obvious and easy I just don't know what it is :(.

Link to comment
Share on other sites

Sorry I should have said, I'm seeing this behaviour in Firefox 46.01. Chrome is fine. In FF if you scroll down the screen until just the bottom of the boxes are visible and click one it jumps into position rather than animates.

  • Like 1
Link to comment
Share on other sites

I am seeing the same behavior as d1ch0t0my in Firefox 46.01 after scroll down. I believe the style object var  will need to re-set its x and y after each animateHero() click after a scroll. Or it could be a FF bug.. or just FF keeping to the spec as far as position static to absolute and scrollTop.

 

It is fIne in Chrome ;)

  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks for pointing this out guys!

 

It wasn't getting the correct scroll position in FF. It should be fixed now.

 

Original demo - 

See the Pen WwgQEV by osublake (@osublake) on CodePen

Scroll demo - 

See the Pen 09f0e19f3faa311327dde97a0d3f605d by osublake (@osublake) on CodePen

 

Found the fix in this article...

http://javascript.info/tutorial/coordinates

  • Like 4
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...