Pin element to footer

[knalle]

How can I have elements fixed on the page (icons here) and have them pin to elements in the bottom (e.g. instagram icon will be pinned to the "Instagram" text in the bottom).

 

Demo gif attached.

 

[akapowl]

 

Hey there.

 

With regard to how pinning works, I am not sure this is even possible (but I might be totally wrong about this).

 

Here are two different ways you could achieve that desired effect, though:

 

 

1) either fake the pin with an animation of the desired element along the y-axis

 

See the Pen 582a6334ddb852c425276cd37bc75e91 by akapowl (@akapowl) on CodePen

 

 

 

or 2) have the element positioned absolute instead of fixed, pin it right away and then release it (when you actually would want to pin it)

 

See the Pen 7e9683415662fecfd1b013ceed33097a by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps a bit.

 

Cheers.

[knalle]

Thanks @akapowl I ended up using solution 2. The icons where not nested in any "relative" DOM, so absolute position on them worked perfectly.