Jump to content

evomedia.lt

ShockinglyGreen
  • Content Count

    11
  • Joined

  • Last visited

Community Reputation

3 Newbie

About evomedia.lt

  • Rank
    Member

Recent Profile Visitors

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

  1. Hi, how to make this text animation with GSAP? :) https://codepen.io/yemon/pen/dzgmxJ
  2. @mikel Thanks for the help. Your example helped me finish.
  3. I want to restart the current circle animation. Now pressing the button previous / next or changing the slide, restarts all circles
  4. var slide = 1; var tl = new TimelineMax({repeat:1, yoyo:false}); $(".owl-carousel").each(function(){ tl.fromTo('.slide-nav.sn-'+slide+' .slide-loading .gold', 5, {drawSVG: "0%"}, {drawSVG: "100%"}, 0); $(this).owlCarousel({ .... }); $(document).on("click", ".slide-nav.sn-"+slide+" button", function () { tl.restart(); }); slide++; }); How to restart current object animation? tl.restart() restarts all objects animations. I have multiple carousels and everyone have svg object with animation.
  5. Started with: var t2 = new TimelineMax(); t2.staggerTo('.letter', 0.2, {opacity: 1, visibility:'visible'}, 0.1); and ended animation with: var x2 = new TimelineMax(); x2.staggerFrom('.letter', 0.2, {opacity: 0, visibility:'hidden'} , -0.1); But visibility still remains of all elements.
  6. Thank you for the workaround, OSUblake It does what I need.
  7. It's a great example, thank you OSUblake. One more thing about svg that still wins over canvas for me is that it's a part of the DOM, not only every element can be styled and animated in real time by CSS, it also can be interacted with, and supports selectors like :hover. With canvas I would need to fall back to tracking coordinates of each item (unless I don't know something about Path2D approach). Back to my previous questions. Jack gave me this workaround: However, I noticed, it doesn't work as intended on tweens that have yoyo:true. I'd like to know if that's a bug or intended behaviour. Here's my codepen to illustrate:
  8. I didn't know about this. Thank you, Jack! It works when the tween is one sided, as in it's a one time or a looped tween. However, if I do a yoyo:true, progress goes from 0 to 1, then back to 0, thus making this solution nonfunctional. What I mean is if I invalidate the tween on it's way back, instead of continuing with the animation it starts going forward again. I made a codepen example here: One sided progress (try changing window width when animation goes forward and then backward, you will see that when you change it on the way back, it jumps to forward animation). Maybe when yoyo is true, the progress should count to 0.5 when going forward and 0.5 to 1 when going back? Sahil, this is great stuff! However as you mentioned, Path2D isn't fully supported everywhere, specially still behind on mobile devices. Also, it goes back to using raster graphics where we have to worry about scalability, and I like how crispy svg vectors look on any display/size. Offtopic question: how do you embed a codepen in a forum reply?
  9. This is awesome! It does what I want in general, even though you can still notice some drift from the center when the tween is restarting (when the line gets long again). Maybe because the line length changes on every frame (it's own tween), and TweenMax optimizes the frame updates for the svg somehow? Doesn't matter, this will be enough for what I need. Now for suggestions, I haven't tested it, but recalculating many objects lengths live should be using extra resources, and sometimes what you really need is change only when the browser window resizes. Maybe there could be a "onResize" along with "live" somehow? Or it could even be a default behaviour, because it is important for responsive aspect of dynamic svg graphics. So possible solution would be just to slap an onResize event listener any time drawSVG tween starts, and recalculate path length if it triggers... Maybe my case is an edge case, but I think animated SVG UI's is the future, and I'm trying to make it as dynamic and responsive as possible.
  10. At this point I came up with a workaround, but I don't think it's a proper solution: Codepen example What I'm doing here is animating a control object with percentage values, and then using onUpdate call to set drawSVG at the given time. Don't know how efficient it is speed-wise, but I am certain this is a workaround and not a solution. What I mean is if I have one or ten objects it's passable, but if I have a hundred animating differently at a time it becomes hard to keep track. Also not all objects require path recalc on every frame, or none at all. I feel like there should be some sort of a flag in drawSVG for the tween to update path length on every frame or even an event callback to resize of the window, because that's when geometry usually tends to change. Maybe I'm thinking too hard about this... Any opinions?
  11. Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance