Jump to content
Search Community

What's the best way to get an GSAP-animated SVG from Codepen into my website?

cooganb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've been using Codepen to adapt my SVGs into animations for a website I'm using. I've built the SVGs in Illustrator, brought them into HTML pane on Codepen, used CSS pane to style and JS to animate. I have about ten I'd like to move, some with similar tags -- what's the best way to go about moving them? including a simple example here of something I'm moving.

 

Thanks so much in advance!

See the Pen wVYaJw by cooganb (@cooganb) on CodePen

Link to comment
Share on other sites

I'm not quite following the question. Do you mean how to move the actual HTML/CSS/JS code from CodePen to your website? If that's what you're asking, I think just a copy/paste would be fast and easy. You can also export the demo by clicking the export button on the bottom right.

 

dTXEob2.png

 

As for naming, you'll definitely need to be mindful of duplicates with your ten demos so the animations all work correctly.

 

Is that what you meant? Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

If you're talking about how to simplify the animation, you could make use of the browser's built in 3D transforms and do something like the below (but the below's approach specifically only works with two boxes. You'd have to change the approach slightly to accommodate more than 2 rotating elements in the same group).

 

See the Pen NWKRNxG?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hey @ZachSaucier! Thanks for your reply.

 

My question is actually how to transfer it from Codepen into a file directory that will be rendered by a browser. Can I just put my JS into `script.js` and call it from the `index` page where the SVG is embedded? Any resources you could point me to?

 

Very beginner question but I'm getting tripped up.....

Link to comment
Share on other sites

Yes, you can just do that. I would recommend putting the script tag referencing the JS file you have at the bottom of the <body> (right before the </body> tag). Just make sure to include the GSAP JS file before you include your own custom JS file.

 

You can see a basic setup in this JS Bin example. Only, if you want your JS file to be external you'd use <script src="script.js"></script> instead of putting it in the HTML file. Same thing for the CSS file but using <link href="styles.css"> (making sure that the path to your files are correct).

  • Like 2
Link to comment
Share on other sites

Quick follow-up, @ZachSaucier:

 

I've been able to embed the SVG and inject the JS file which allows the SVG to be animated. However, the website is a series of slides, the SVG in question being a slide or two from the beginning. It seems as though when I press the key to change the slide, the SVG freezes in its animation. Any idea what's going on?

Link to comment
Share on other sites

7 minutes ago, cooganb said:

How could I gauge performance on the browser?

Now that's a big question, haha. You could start by looking at Chrome's developer resources like this article.

 

But I recommend just creating a minimal demo for us to view the issue as we're much more likely to be able to help quickly in figuring out exactly what's happening :) 

  • Like 3
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.
×
×
  • Create New...