Tween an img from absolute position to anchor to bottom

[Alan Kell]

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.

[Shaun Gorneau]

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".

[Alan Kell]

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

[Shaun Gorneau]

@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!

[Alan Kell]

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.

[Shaun Gorneau]

Glad to help, @Alan Kell!