Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About cooganb

  • Rank
  1. How could I gauge performance on the browser? I'm on Chrome
  2. 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.
  3. 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?
  4. @PointC and @GreenSock Worked like a charm! Thanks for all your help!
  5. Thank you so much @ZachSaucier! I really appreciate the help.
  6. 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.....
  7. 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!
  8. @PointC and @GreenSock I did as recommended, put them in separate SVGs, wrapped each SVG in a <div>, then put a class on the <div> However, the z-index is still not changing. Here's the codepen I'm working off of: https://codepen.io/cooganb/pen/wVYaJw
  9. @PointC and @GreenSock Thank you! I didn't think about making each their own unique SVG -- I will give it a try now!
  10. Hi there! I'm trying to create an "orbit" effect with these two SVG objects. however, I'm reading that z-index doesn't really work within an animation, as SVGs are painted. Is there a way to have the effect of switching the z-index within an SVG? I was also wondering if there was a way to make the effect smooth, so there isn't a jerk when the objects switch directions. Is that possible to change with ease? Thanks in advance!
  11. Hi there! I'm really excited about using Greensock, but I'm pretty new to both GSAP and SVG animation. I'm trying to build an animation where one shapes disappears behind an object and the other appears out from the same object. The effect would be one object "transforming" into the other behind an object (the Codepen makes it more clear). I'm trying to use clipPaths to do it, but I can't tell if I'm animating it correctly. It might be an issue with my CSS, I can't tell! The first CodePen attached is what I have so far with the clipPaths. The second linked below is with the clipPaths removed: https://codepen.io/cooganb/pen/vqLLQg Any help would be much appreciated!