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

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Perfect! @ZachSaucier you all are amazing! Thank you.
  2. @ZachSaucier One more quick question! Any idea as to why the function is only working for the first ellipse and not the later ones? https://codepen.io/cooganb/pen/WNNMdrb
  3. Hi there! I've been trying to follow the "Writing Smarter Animation Code" article. This includes compacting animations into functions, which can then be imported into a master timeline. I'm having some trouble with using DOM element manipulation in the functions. The function in the above example fails when I try to run it, saying `vars` using .GetDocumentById has not been assigned. However, when the logic is moved from function to the body of the JS doc, the animation works (which you can see commented out in the Codepen). Any advice from folks? Thanks in advance!
  4. How could I gauge performance on the browser? I'm on Chrome
  5. 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.
  6. 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?
  7. @PointC and @GreenSock Worked like a charm! Thanks for all your help!
  8. Thank you so much @ZachSaucier! I really appreciate the help.
  9. 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.....
  10. 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!
  11. @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
  12. @PointC and @GreenSock Thank you! I didn't think about making each their own unique SVG -- I will give it a try now!
  13. 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!