Leaderboard


Popular Content

Showing most liked content on 01/21/2018 in Posts

  1. 3 points
    Hi @jamesg It's always helpful if you can put what you have in a simple demo. It doesn't have to be pretty, or even working. Just something we can experiment with. For this, I would probably morph the lips as a mask or clip path for a group element (<g>). In that group, I would put a darkblue rectangle to give it a background color, and for the mouth, well it probably doesn't need to be morphed. The mouth shape could probably be left as is, but move it down on the y-axis so it's not visible in the starting state. You could also scale it down a bit if needed. And to animate it, just morph the mask or clip path while moving the mouth up. But that's just one way to do it. There is no correct way. And animating masks and clip paths have their own little quirks, so you should test to see what works best. If you haven't already, check out the SVG Gotchas thread. It has some good tips on working with masks and clip paths.
  2. 1 point
  3. 1 point
    I'm also wondering if a pattern might work here. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
  4. 1 point
    That's pretty neat effect! The best alternative is to just animate each element individually. Yes, it requires more tweens, but performance should be the same or better, and you don't have to deal with weird rendering issues.
  5. 1 point
    Any reason for doing it like that? My advice for SVGs, don't use <use> ever. It can be really slow, and super buggy.
  6. 1 point
    You're placing a bunch of unnecessary restrictions on your animation. And I see transforms in your html that do the same thing as xPercent/yPercent. Transform origin does not affect x and y. If you want to move something from the center instead of the top left corner, then offset your points half the width and height of the object your animating.
  7. 1 point
    The trigger property might be what you're looking for.
  8. 1 point
    setTimeout(()=> { TweenLite.to(window, 2, {scrollTo:{y: 200}}); }, 0); Actually my issue was that I was cloning a lot of elements in the DOM, so the scroll fired before the DOM had finished cloning. Enclosing this in a setTImeout ensured that this fires all the time.