Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 10/11/2018 in all areas

  1. If I understand your question correctly, I think you could just add onReverseComplete like this: tl.staggerFrom('.box',0.5,{opacity:0, onComplete:update, onReverseComplete:update},0.3) Does that help? Happy tweening.
    3 points
  2. You just forgot to load the DrawSVG plugin.
    3 points
  3. Sounds like you'll need to use a mask. Happy tweening.
    3 points
  4. Ditto. What have you tried that did not work previously? Been hiding under a baby. For such small things, they are a handful... And no, my parking spot is definitely NOT up for grabs. My paternity leave (aka money) is coming to an end so, expect me back some point next week.
    3 points
  5. Thanks @OSUblake! I realise this is more of a general JS thread than specifically GSAP at this point so I appreciate you going above and beyond. Have to say the levels of support on this forum and on GreenSock in general are simply phenomenal. As a beginner it's incredibly encouraging to see you guys care about users (of all levels) and is making getting to grips with GSAP completely awesome/rewarding Will do the reading and post final animation when it's wrapped up. Thanks again!
    3 points
  6. Hi @kbeats, the issue I see is that you are appending to the same timeline and playing/reversing that timeline. That's why they get added together. Give this a try,
    2 points
  7. uh-oh, @Carl is getting clever today. Nice one. I honestly wasn't sure if the OP meant the forward onComplete firing again when the timeline reverses or the onReverseComplete that I mentioned. Either way, well done good sir.
    2 points
  8. When a tween is nested its onComplete is not fired when its parent is being reversed because, well, the tween is not completing then... its just playing backwards from its end. Instead of using staggerFrom, you can loop through each element and add a tween and a call() like so: console.clear(); var tl = new TimelineMax({yoyo: true, repeat:1, repeatDelay:1}) document.querySelectorAll('.box').forEach(function(element, index) { tl.from(element, 0.3, {opacity:0}, index*1) .call(update, [index]) }); //enable next line if you want last tween to fire its callback when timeline reverses. //tl.set({}, {}, "+=0.001") //the line above adds a little teensy weensy bit of time after the last tween. //without this the playhead will rest on the end of the last tween and when the parent reverses then the callback won't fire as the playhead is already there. function update(index){ console.log('completed tween' + index) } Open the CodePen console while you view:
    2 points
  9. If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want. It should be as simple as setting: CSSPlugin.defaultSkewType = "simple"; Or on a per-tween basis: TweenMax.to(... {skewType:"simple", skewY:30}); From the docs: Does that resolve things?
    2 points
  10. Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.
    1 point
  11. I have a bunch of paths that need to start and sometimes end at 50% 50%. They also need to have a round linecap. Starting at either 0% 0% or 100% 100% works well of course, but the 50/50 line starts with that circle sitting out there. I've been getting around this by setting the linecap to either 'round' or 'butt' as needed immediately before and/or after tweening, but I wanted to make sure I wasn't missing something easier. Happy tweening.
    1 point
  12. Looks like Shaun has you all fixed up, but here's a slightly different approach just in case you need options. Happy tweening.
    1 point
  13. Hi Jack, Yes it solves the issue, thanks a lot. ?
    1 point
  14. Nah. I don't have a lot of experience with frameworks like Vue, Angular, React, etc. They're really just JavaScript questions.
    1 point
  15. Looks like @OSUblake is taking over the Vue questions now. I thought this topic was gonna be handled by Vue-Master @Dipscom. Where has he been hiding lately? Is his parking spot up for grabs? ?
    1 point
  16. You can't say it doesn't work if there isn't any animation code. Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to. https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524 And I'm pretty sure you can make a canvas animation reactive. These examples use state. https://vuejs.org/v2/guide/transitioning-state.html
    1 point
  17. That would be it Mikel! Thank you so much! ?
    1 point
  18. Yeah, I tinkered with a few things like that. I animated a little rectangle at the end of each line to make it look like the round linecap was collapsing into a butt cap, but it ended up being more trouble that it was worth. The animation is pretty quick so I can probably get away with just hiding it too. For a slower animation, Blake's idea works well. I had a hunch Jack had considered something for this scenario and it probably wasn't feasible, but thought I'd float the question for creative solutions. Who knows, maybe it will help someone else doing battle with SVGs.
    1 point
  19. Hi @Jonathan, Yes, the Banksy approach is the proper reaction to many problems. So it would be helpful if I see myself in the mirror in the morning, it would be banksy-ed. Let's shred ... Mikel
    1 point
  20. It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here. If you need play/pause, you can do this. function pause() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].pause(); } } function play() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].play(); } } Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6). https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca https://greensock.com/learning-gems MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    1 point
  21. FYI. And for anyone else who may experience this: Looks like it's an issue with Uglify; I think I have it pin-pointed to this issue: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/355 NOTE: I edited the topic of this post for more clarity with the cause of the issue.
    1 point
  22. Oh I noticed it yesterday, but I was out for most of the day. It's hard making a demo on a phone. ?
    1 point
  23. Accidental discoveries are always the best. They make you feel like you just discovered penicillin. I understand why works after seeing it, but if somebody asked me to do that yesterday, I'm sure I would have done it the hard way. With a lot of circles and a lot of math.
    1 point
  24. Pretty neat! Was this an accidental discovery? For canvas that would be... context.lineWidth = size; context.setLineDash([0, size]);
    1 point
  25. I'm about to run out the door, so I didn't have much time to dig into this but it appears as though the problem is just that you scaled everything down BEFORE you set the transformOrigin, thus they scaled down using the default origin of 0,0. So imagine a box with its origin in its upper left corner, and then you scale it to 0. It would basically be infinitely small, right on top of where the top left corner was. Then, if you scale up from transformOrigin:"50% 50%", think about where that "center" would be at that point - basically the same place because the element has no width/height anymore and is sitting right on the upper left corner. The solution should be pretty simple - just set the transformOrigin up front. Add transformOrigin:"50% 50%" to your scale:0 tween. Or do a separate set() before the rest of the code runs. Does that clear things up?
    1 point
  26. Jack .. that killFunkySVG() function is the biscuits and gravy! All one command paths have been put on notice!
    1 point
×
×
  • Create New...