Jump to content


Animate an External Svg w. GreenSock

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

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.




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 by SteinarvDesign
Following advice from GreenSock
Link to comment
Share on other sites

  • Solution

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



  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.