SlimMarten

using a value of 0.01 is doing the job so far now. thanks for the hint!

Hi I am trying to animate multiple svg elements like so: TweenMax.fromTo(elements, duration, { scale: 0, },{ scale: 1, svgOrigin: '175 175', } using svgOrigin like provided in the example returns an "data-svg-origin"-attribute with a value of "NaN NaN". What am I doing wrong?

I am having a simple tween formTo(). TweenMax.fromTo(element, duration, { attr: { transform: `translate(0,${expander+offsetY})` }, },{ attr: { transform: `translate(0,${ expander*(-20 + offsetY)})` }, ease: Elastic.easeOut.config(1, 0.5), yoyo: true, repeat: -1, } ); I have defined a default Elastic easing in the tweens property here. What I am trying to achieve now, is to give my tween another easing when it plays reverse. Is that possible at all? Thanks in advance

that is actually what I was afraid of since I have a lot of groups in my current project. And as far as I know, moving <g>'s with the attribute "cx" or "cy" is not possible at all

I am trying to constantly draw an outline arround all my SVG objects silhouette. Drawing an outline arround a single object is not doing the trick, since objects in my svg are overlapping, and I want the outline to wrap arround my objects..

oh well, okay in firefox its also not working... but why, what's wrong?

can't confirm that, my demo is working in chrome as expected but not in IE. http://codepen.io/anon/pen/GNqYXN

its not working in IE 11 and up

@Carl , please have a look at this demo. http://codepen.io/anon/pen/GNqYXN

Hi, I am trying to translate an group element <g> with greensock, but somehow it is not working. If I don't use the attrPlugin, it's not working in IE 11 and up this is my svg: <svg viewbox="0 0 350 350"><mask id="silhouette"> <g filter="url(#sharpen)"> <g filter="url(#blur)"> <rect x="-25" y="-25" width="400" height="400" fill="#000"></rect> <circle cx="175" cy="175" r="40" fill="#fff"></circle> <g class="move" widht="350" height="350"> <circle class="" cx="120" cy="115" r="25" fill="#fff"></circle> </g> </g> </g> </mask></svg> and this is how I try to move the group with the class "move" TweenMax.to(target, duration,{ attr:{ transform: "translate(100,0)" } }); The transform values actually become applied, but the group is not moving. I tried moving a group via transform and translate property before and it changes position if I enter a translate value by default. What am I missing here?

Hey there, first things first, I am new to this Forum as well as new to GSAP, so please bear with me. I try to give my best to describe what I am struggling with. In order to animate an SVG file I started diving into GSAP. I created several Tweens for different elements within my SVG file. Everything worked fine and ist animating as expected. Since I have a lot of elements to animate within my SVG, I started adding TimelineLite to have more control about the whole thing. At this point, my script file looked something like this: First I declared all the elements I'd like to animate: this.phone = document.querySelector('#gsap-phone-svg'); this.body = document.querySelectorAll('.gsap-phone-body'); this.body.shadow = this.phone.querySelectorAll('.gsap-phone-body-shadow'); this.body.mask = this.phone.querySelectorAll('.gsap-phone-body-mask'); this.layer = this.phone.querySelectorAll('.gsap-phone-layer'); this.screen = this.phone.querySelectorAll('.gsap-phone-screen'); this.screen.clipPath = this.phone.querySelectorAll('.gsap-phone-screen-clipPath'); . . . // many more following here Than I created an Object to save my Tweens in: const tweens = {}; // creating tweens tweens.body = TweenMax.to(this.body, this.animDur/2,{ y: this.maxExpand/6*-1, ease: this.ease }); . . . // many more following here At the end I added all my tweens to an temp array which I passed into a new TimelineLite() afterwards like so: const tl = new TimelineLite(); tl.add(tweensArray, 0, "start", 0.05); Seems logic so far, I guess... Now here is the crux. You may have noticed or not that I have like more than 20 elements or so to animate. Thats why adding a tween for every element on its own becomes very confusing. Also I want the whole main timeline to be repetitive. The problem here is, that I want different easing for all my tweens on the "in-animation" than on the "out-animation", as well as I want to have no stagger on the "out-animation". All these little cruxes made me think about an alternative solution to manage the creation of my tweens and timelines. The most handy solution that came in my mind was to store all the information about my anim elements and timelines within an object: const animation = { settings : { duration: 1.5, expansion: 1, easeIn: Elastic.easeOut.config(1, 0.5), easeOut: Power2.easeInOut }, timelines : { main : { delay : 0, paused : true, align : 'start', stagger : 0.05, }, test : { delay: 0, paused : true, align : 'start', stagger : 0.5 } }, items : { phone : { id : '#gsap-phone-svg', start : { }, end : { }, timeline : 'test', }, body : { class : '.gsap-phone-body', start : { y : 0, }, end : { y : -21, }, timeline : 'test', }, layer : { class : '.gsap-phone-layer', start : { y : 0, }, end : { y : -62.5, }, timeline : 'main', }, radar : { class : '.gsap-phone-radar', start : { y : 0, }, end : { y : -25, }, timeline : 'main', }, radarBase : { class : '.gsap-phone-radar-base', start: { y : 0, }, end : { y: -16, }, timeline : 'test', }, ringOne : { class : '.gsap-phone-radar-ring-1', start : { y : 0, }, end : { y: -25, }, timeline : 'test', }, ringTwo : { class : '.gsap-phone-radar-ring-2', start : { y : 0, }, end : { y: -41, }, timeline : 'main', }, ringThree : { class : '.gsap-phone-radar-ring-3', start : { y : 0, }, end : { y: -62.5, }, timeline : 'main', }, cancel : { class : '.gsap-phone-cancel', start : { y : 0, }, end : { y: -50, }, timeline : 'main', }, submit : { class : '.gsap-phone-submit', start : { y : 0, }, end : { y: -100, }, timeline : 'main', } } }; Than I wrote this "createTweens" method to return the GSAP Tweens /* create tweens */ function createTweens(anim){ const el = anim.items; const settings = anim.settings; const duration = settings.duration; const easeIn = settings.easeIn; const easeOut = settings.easeOut; const tweensIn = []; const tweensOut = []; let tempTween = null; for (const key in el){ const curEl = el[key]; const selector = curEl.class || el[key].id; const startPoint = curEl.start || ''; const endPoint = curEl.end || ''; const timeline = curEl.timeline || ''; const nodes = document.querySelectorAll(selector); nodes.forEach(object => { tweensIn.push(getTween(object, endPoint, duration, easeIn, `${timeline}-in`)); tweensOut.push(getTween(object, startPoint, duration, easeOut, `${timeline}-out`)); }); } function getTween(tw, twValues, twDur, twEase, tl){ const vars = twValues; vars.paused = false; vars.ease = twEase; tempTween = TweenMax.to(tw, twDur/2, vars); tempTween.data = { timelineName : tl }; return tempTween; } return tweensIn.concat(tweensOut); } and another function to return the timelines: /* create timelines */ function createTimelines(anim, tweens){ const el = anim.timelines; const timelines = {}; // timelines.mainIn = new TimelineLite(); // timelines.mainOut = new TimelineLite(); const tweensForTimelines = {}; for(const key in el){ const delay = el[key].delay; const paused = el[key].paused; const align = el[key].align; const stagger = el[key].stagger; const vars = {}; vars.paused = paused; timelines[`${key}-in`] = new TimelineLite(vars); timelines[`${key}-in`].delay = delay; timelines[`${key}-in`].align = align; timelines[`${key}-in`].stagger = stagger; timelines[`${key}-out`] = new TimelineLite(vars); timelines[`${key}-out`].delay = delay; timelines[`${key}-out`].align = align; timelines[`${key}-out`].stagger = stagger; tweensForTimelines[`${key}-in`] = []; tweensForTimelines[`${key}-out`] = []; } if(Object.keys(tweensForTimelines).length !== 0){ for(let i = 0; i < tweens.length; i++){ const curTween = tweens[i]; const tlTarget = curTween.data.timelineName; tweensForTimelines[tlTarget].push(curTween); } } for(const key in timelines){ try{ timelines[key].add(tweensForTimelines[key], timelines[key].delay, timelines[key].align, timelines[key].stagger); console.log(TweenMax.getTweensOf(timelines[key])); timelines[key].data = tweensForTimelines[key]; } catch(e){ } } return timelines; } If I execute the following code than, it would play my "main-in" timeline. const tweens = createTweens(animation); const timelines = createTimelines(animation, tweens); timelines['main-in'].play(); So far, this is actually working. But if I try to add the "main-in" timeline to a new timeline, its not working anymore. const anotherTimeline = new TimelineLite(); anotherTimeline.add(timelines['main-in']); anotherTimeline.play(); In order to debug this, I tried TweenMax.getTweensOf(anotherTimeline); but all this returns is an empty Array. Then I logged the same for my "main-in" timeline: console.log(TweenMax.getTweensOf(timelines['main-in'])); also returning an empty Arraywhich is very confusing to me, since even though this timeline seems to be empty, it plays my !in-animation" on: timelines['main-in'] I am really stuck here and would really appreciate some help from the more advanced users or simply anyone who has an idea for this. I hope you guys were able to follow me ... in case not, I will attach my script to this post, so if you are interested, you can have a look on it. UPDATE: Click for Codepen DEMO Thanks in advance! AppDevController.js.zip