Border Animation...

[Conill Blanc]

Hi, i don't know how to explain.

I want to do an animation for these image.. let me explain.

 

The idea is (from the picture):

 

fade the image (easy), then the image "elevates" and the borders appear one by one like a 3d aproach...

 

i need some ideas on how to start... if use SVG for the borders... or no.

 

(if something doesnt understand just let me know)

Tks in advance for the answers... Is my firts time in the forum any problem let me know.

 

Cheers

 

[Shaun Gorneau]

Hi @Conill Blanc and welcome to the forums!

 

If I understand correctly, I think what you're looking for is to sequentially tween 4 elements; the image, a blue border, a magenta border, and a yellow border. Something like this,

 

See the Pen JjERyYg by sgorneau (@sgorneau) on CodePen.

[Conill Blanc]

Hi @Shaun Gorneau, thats was awesome!

I'm gonna tweak a little so it goes in the other way. and smoothly so it seems the image let the trace of colors...

But that was the basic idea.

 

Tks for the fast answer.

 

[Shaun Gorneau]

Happy to help, @Conill Blanc!