zachschnackel

Hi all! This is more of a general question, but I'll explain my use-case. I have a component that has a timeline attached to it. This component is visible to start, but the timeline itself visually removes it from the page (a dismissible alert). In a particular case, I need to utilize both the reverse, then the forward action immediately. So, I am looking for a way to start the timeline at the end, reverse it, then play it. I've looked into both `time()` and `progress()` but when I run those, they seem to be accelerating "to" that point, instead of just plain setting the time, like `TweenMax.set()` would. Perhaps I've been approaching this wrong, but if anyone has an idea how to set that timeline to be at the end by default, I'd really appreciate it. Thanks!

Appreciate both replies and made total sense. Think I was confusing onStart from TweenMax; thinking that was different than onDragStart. Thanks!

Hi, I'm not seeing any type of init callback I can use to listen to with the Draggable utility. My usecase is waiting until the Draggable instance is ready before manually changing an adjacent value that updates the Draggable instance.

Hi @Diaco, Thanks for the reply! It appears you might be talking about grabbing the updated `cx` or `cy` attribute from the element, but it is being changed via the transform property. If I do something like: onUpdate: function() { this.target[0].attributes.style.cssText = this.target[0].attributes.style.nodeValue; }, Then I can see the style node being updated just fine, but the attribute itself never moves.

Hi all, Referencing http://greensock.com/forums/topic/12272-animating-svg-masks-clip-path-not-working-in-firefox/ it appears that using the Attr plugin when animating SVG clip masks resolves a long-standing issue with Firefox not being able to target these properties correctly. My issue however is that I am animating elements that are within an SVG clip mask, not solely by the attributes plugin, but with the Bezier plugin. Is there a way to combine these two plugins to correct this behavior in Firefox? Thanks!

Hey Carl, Appreciate the reply. It's bezier curve that I need starting before the other is done; so what I'm thinking I may need to do is duplicate the content and delay a separate toggle on that duped content.

Hi all, If I am using the staggerTo() property to run through a series of elements, is it possible to "start" the stagger animation again before the original stagger is complete? I've tried using the repeatDelay property, but there's still quite a gap in-between the timeline restarting. $wave.timeline = new TimelineMax({ repeat: -1, repeatDelay: -4 }); $wave.timeline .staggerTo('.Employee', 1.5, { delay: 1, opacity: 1 }, offset, 'path') .staggerTo('.Employee', 20, { bezier: { type: "soft", values: bezierCurve }, ease: Power1.easeInOut }, offset, 'path') .staggerTo('.Employee', 1.5, { opacity: 0, delay: 15 }, offset, 'path');

var tlUp = new TimelineMax({paused: true}); tlUp .to(value[0].querySelector('.employee__avatar-circle'), 0.25, { css: { scale: 2, background: '#3C51FC' }, ease: Power0.easeNone }) .to(value[0].querySelector('.employee__avatar'), 0.25, { opacity: 1, ease: Power0.easeNone }); Is there anyway to apply the reverse of this on an element that is not directly attached to the current Timeline, but has matching DOM? Currently I had to create a down Timeline which is what I'd like for the first to do automatically: var tlDown = new TimelineMax({paused: true}); tlDown .to(value[0].querySelector('.employee__avatar'), 0.25, { opacity: 0, ease: Power0.easeNone }) .to(value[0].querySelector('.employee__avatar-circle'), 0.25, { css: { scale: 1, background: 'transparent' }, ease: Power0.easeNone }); Thanks for any help!

Ok thanks for confirming!

Hi all, When you attach a timeline to an element; does GSAP attach a node parameter (within the list of offsetX, offsetHeight, nextSibling, etc) that I can gather information about and ultimately tween if needed? Having trouble finding this. Thanks!

Hey Jack, Believe that was it. I recreated that animation using all SVGs and it worked great http://codepen.io/zslabs/full/wKVzYy/ Thanks for the tip!

Gotcha, I'll go down that route and see where I end up. Thanks Jack!

Hey Jack, Really appreciate the reply. I completely get your above point; what I'm trying to figure out is why something like http://codepen.io/chrisgannon/pen/wKReBX which uses the same type of filters works very well on my mobile device, even though there's a lot more elements on the page. Could this have something to do with applying the filter with CSS compared to using all SVG elements?

Hi all, In the referenced CodePen, the "social blob" animation on desktop; using `feGaussianBlur` and `feColorMatrix`, is smooth and works as intended, but on mobile devices the shapes are cut-off and very choppy. Is there something I'm missing with how GSAP is interpreting these values? Thanks so much for any help!