Jump to content
GreenSock

Alan Kell

Tween an img from absolute position to anchor to bottom

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,

 

I'm looking to move an element (an image) on a webpage from it's current absolute position and have it end up anchored to the bottom of the webpage. I can move the element from its current position to a new position at the bottom of the page, but when the page size is increased, making it taller, the element is not longer at the bottom of the page.

 

Is there a way to anchor it when the move is complete?

 

Thanks in advance for any help.

Al.

Link to comment
Share on other sites

Hi @Alan Kell,

 

I would say you can tween to the calculated position but then, once there, you would need to do some DOM manipulation to get it there in the document flow (perhaps with additional styling to accommodate via a newly assigned class) so that further DOM manipulation (i.e. whatever content is making the page height grow) allows the image to flow naturally and "stay in position".

  • Like 1
Link to comment
Share on other sites

Thanks for the quick reply Shaun, I'll have a go at assigning a new class to it when it completes the tween.

Link to comment
Share on other sites

@Alan Kell a class alone making use of some absolute positioning with `top: auto` and `bottom: some-pixel-value` **might** work ... but i would opt for 

 

1. The calculated Tween to get it into position

2. Some DOM manipulation to actually place into this place in the DOM (while immediately performing a clearProps to remove tweened values)

3. Some CSS to override its absolute positioning and accommodate any margins it might need to "stay" in place

 

Here is a CodePen showing what I mean. (full page view due to height)

 

See the Pen ZwojGG by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

  • Like 6
Link to comment
Share on other sites

Hi Shaun,

 

That last answer and related CodePen was a massive help, thanks! I've got it working by doing pretty much what you've suggested there.

 

Thanks for all of your help.

Al.

  • 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.
×