Animate an External Svg w. GreenSock

[SteinarvDesign 2 Likes (Newbie)]

I wanted to animate an external Svg w. GreenSock/Gsap.

I have used svg paths for the letters.

Here is the result.

My external Svg is a Codepen asset.

 

SteinarV

 

Edit : The animation is now created after the SVG has loaded using fetch(" ...") and async/await.

           The animation is triggered on 'page load'.

See the Pen qBPpvVo by steinarV (@steinarV) on CodePen

Edited December 28, 2021 by SteinarvDesign
Following advice from GreenSock

[OSUblake 18,452 Likes (Superhero)]

You need to create your animation after the SVG has loaded. The window load event does not include ajax calls like that, so you'll have to use a callback provided by XMLHttpRequest.

 

Another option using fetch...

 

See the Pen OJgppgX by GreenSock (@GreenSock) on CodePen

 

 

[SteinarvDesign 2 Likes (Newbie)]

@OSUblake Great advice  . . .  thank you !