Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About franklylate

  • Rank
  1. Unfortunately my user base is still 10% IE11. Canvas isn't an option since I'm exporting an SVG from Illustrator and would prefer to not recreate in JS. Can you tell me more about not using strokes? Not certain what that entails. Thanks!
  2. Hi all, bit of a conundrum: I have a rudimentary globe and looking to animate a simple spin. I've decided on using scaleX and transformOrigin: "100% 50%" to just scale over to -1 and it works 'perfectly'. Unfortunately scaleX also scales the stroke—I tested vector-effect="non-scaling-stroke" but unfortunately it removes the proportion / resizing attributes that I'm relying on to keep the SVG working as intended in IE11. Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?
  3. That makes a lot of sense -- I completely blanked on <g> elements since my Illustrator was set to minify the svg. I put together another prototype and dropped a circle as the anchor and used its xy coordinates as the svgOrigin for the part. This cleaned up everything really nicely! Thanks https://codepen.io/jcollette/pen/GawLgy
  4. Hi all, in AfterEffects you're able to pin animation pieces together at joints and they inherit transforms and I couldn't find any documentation on how to do a similar workflow properly in GSAP. I started picking apart the "Howl's moving castle" animation example and saw that the divs contain img elements and nested again within other divs and positioned using absolute so the transforms flow down properly to smaller elements. Tried out my own version on a simple scale animation. Works fine, but got me thinking: is this the most effect way to animate complex components or is there a
  5. Nope, you guys have it exactly correct! .rotateG g, .rotateG { transform-origin: 50% 50%; } wasn't producing the expected behavior but svgOrigin and transformOrigin in the tween is working exactly as it should! Thanks Updated codepen with loop+rotation at https://codepen.io/jcollette/pen/zQOEeE
  6. Hey all, I saw a lot of chatter on here that SVG G isn't necessarily supported but figured I would check -- I'm getting a really odd matrix transform for rotation on a SVG G elements. Seems like it's getting a translateX + translateY movement as well and swinging the animation strangely. Works perfectly for just SVG and I could rewrite to break out the g elements to separate SVGs (processor GULP!) but figured I'd check before I consider. The browsers we're supporting take in transform: rotate(90deg) correctly on SVG G and I could probably rewrite for CSS tweens as well but they're
  7. Had a typo and stripped out brand content. Thanks a million, @Jonathan
  8. Hi all, I've been using a lot of the forum for reference lately but finally found an issue I couldn't find asked previously: I'm created an animation similar to the Matrix "falling code" effect but ran into some difficulty creating a loop and ended up just copy and pasting the tween and updating the nth-child(#) 30 times. I created a function set to return a randomized number and am using that function to randomize the animation lengths. The code snippet sets all the y tweens to the same animation length since the function only triggers once: introaniTL .