How to add SVGs, or images between texts. Video attached for reference.

[utkarsh125]

Hello community. I hope you all are doing well. I just wanted to know how can one add animations  like these using GSAP if it is possible. I'm kinda new to this thing and have started diving deep recently. This is one of the first challenges that I have came across. 

Why my problem is pretty simple, I just want image, svg animations between text and the text should adapt to the image accordingly. How can I achieve this thing?

see the video attached.

[Rodrigo]

Hi @utkarsh125 and welcome to the GSAP Forums!

 

Sure thing here are a few demos:

See the Pen WbNMXje by GreenSock (@GreenSock) on CodePen.

 

These demos use the Flip Plugin:

https://gsap.com/docs/v3/Plugins/Flip/

 

See the Pen jOgYqwW by GreenSock (@GreenSock) on CodePen.

 

See the Pen qBzEwMx by GreenSock (@GreenSock) on CodePen.

 

See the Pen EaVKyPG by GreenSock (@GreenSock) on CodePen.

 

Then is just about using a Timeline in order to add the icon/images animation using the position parameter:

https://gsap.com/docs/v3/GSAP/Timeline

 

Hopefully this helps

Happy Tweening!

[utkarsh125]

15 hours ago, Rodrigo said:

Hi @utkarsh125 and welcome to the GSAP Forums!

 

Sure thing here are a few demos:

 

 

 

These demos use the Flip Plugin:

https://gsap.com/docs/v3/Plugins/Flip/

 

 

 

 

 

 

 

 

 

 

Then is just about using a Timeline in order to add the icon/images animation using the position parameter:

https://gsap.com/docs/v3/GSAP/Timeline

 

Hopefully this helps

Happy Tweening!

I managed to do it with a stack of images. Thank you so much!