Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cooganb

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

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.....

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

It's possible that it could be performance jank (I'd guess the gradient is your biggest culprit) but it could be something else entirely. Without a minimal demo it's hard to say. 

 

What are you using to do the carousel/slider animation?

Share this post


Link to post
Share on other sites

Ah, it's a homemade slide feature from view where there's a slide counter that goes up as the right key gets pressed. 

 

Will try to mock something up! AFK right now. 

Share this post


Link to post
Share on other sites

How could I gauge performance on the browser? I'm on Chrome

Share this post


Link to post
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 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×