• Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About tyelrx

  • Rank
  1. tyelrx

    Animating along path, auto rotate transform origin

    Had a similar if not the same problem with autoRotate of an svg object along a bezier path..... always a little off. Setting the above helped fix it... it was almost like the svg path wasn't rotating around it's center point.
  2. tyelrx

    Conditional Tween

    i know this is old but yeah I would think the default beahavior would push everything back but then again i don't care too much.
  3. tyelrx

    dev tools must be Christmas already!!!

    Another issue, outside of this one would be iframes that load a child container. It would be nice to pass in the timeline object as one of the optional parms of GSdevtools. It's not always practical to have this ready to go right after the timeline loads.
  4. tyelrx

    dev tools must be Christmas already!!!

    That might explain why it wasn’t working for me. It would load the interface and show in the DOM but nothing worked. All buttons did nothing. I believe as you mentioned it wouldn’t be soon enough and capture the timeline. Bummer but thank you. It was worth asking.
  5. tyelrx

    dev tools must be Christmas already!!!

    Just curious and this would help alot but is there anyway to add it after the fact via console? That way it didn't need to be included in the actual file but could be referenced later. My team builds alot of banners and this would help during reviews. var jq = document.createElement('script'); jq.src = "/GSDevTools.min.js"; /// some server site for my team only jq.onload = function(){ GSDevTools.create(); } document.getElementsByTagName('head')[0].appendChild(jq);
  6. tyelrx

    SVG mask tween - flicker

    Thank you
  7. tyelrx

    SVG mask tween - flicker

    Just curious- But in Chrome/Safrai - the svg animation flickers (at the end of the animation) and the mask is almost reset. I would like the animation to end on the solid white color. (this works in Firefox). I must be over looking something. Any help would be helpful. thanks
  8. tyelrx

    spiltText inquiry

    I know this works but I'm not sure if there is a way to write this without so many lines of code and calling splitText more than once (since it's already split by line/char); HTML: <div id="txt2">And the perfect<br>Brandname card is<br>one click away.</div> JS: splitTxt2 = new SplitText(txt2, {type:"lines"}); linesTxt2 = splitTxt2.lines; txt2L1 = new SplitText(linesTxt2[0], {type:"chars"}); charsTxt2L1 = txt2L1.chars; txt2L2 = new SplitText(linesTxt2[1], {type:"chars"}); charsTxt2L2 = txt2L2.chars; txt2L3 = new SplitText(linesTxt2[2], {type:"chars"}); charsTxt2L3 = txt2L3.chars; Not sure why I can't just do this. I know you can give it a class for lines/words/chars, but then i'd have to query those. Just curious if I'm missing something. txt2 = new SplitText(txt2, {type:"lines,chars"}); charsTxt2L1 = wordsTxt2.lines[0].chars; charsTxt2L2 = wordsTxt2.lines[1].chars; charsTxt2L3 = wordsTxt2.lines[2].chars; thanks
  9. tyelrx

    Image Clipping

    Anyone have any luck with animating the clip-pathing? ie... translating it may 50px over and scaling it some. Got it to work in webkit, firefox has issues. Was looking into using attr plugin.
  10. Is it just me or is the code on your page for ScrambleTextPlugin not working. https://greensock.com/ScrambleTextPlugin
  11. tyelrx


    FYI - I dislike using adword. Tech issues I came across for Google Adwords 1) ALL assets need to be local – no external CDN network calls 2) Data URIs can't be used in css, meaning no base64 encoded assets. Google adwords does not support this. Not sure why. (see example below); #someElement { background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) } 3) Adwords does not support masking as implemented in Firefox. See link below but adwords could not find the class #localstyle below on a svg object. (both embedded or in the root directory). Masking for webkit browsers seems to work however. <style>.stylename { mask: url(#localstyle); }</style> https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content
  12. tyelrx

    Ease duration in .staggerFrom

    Rockstar, didn't know about .seek thanks
  13. tyelrx

    Ease duration in .staggerFrom

    thanks Carl. Is there at least a way to calculate a value of a tweened object over time without waiting (pre-calculate)? Sorry i don't believe I'm explaining this correctly. But this way I can store it in an Array for later use. The end goal would be to use those values in a for loop, without having to wait for the first tween to actaully take (let's say) 5 secs. ( in reality - the total time would be the the number of tweens in an Array - staggered by 0.05 secs). thanks var obj = {time:0}; var EndingDuration = 1.55; TweenMax.to(obj, totalTime, {time:EndingDuration, ease:Sine.easeOut, onUpdate:newTime, onComplete: animateIn}); function newTime() { timeArray.push(obj.time); }
  14. tyelrx

    Ease duration in .staggerFrom

    Is there any easy way to tween the time in the example below. So for example, the first duration of the first oject in the array would be 0.35 and the the last duration of the last oject would be 1.55. //original without tweening the duration TweenMax.staggerFrom(split.chars, 0.35, { opacity: 0, top: "-5", rotationX: '-180deg', transformPerspective: 1500, ease: Sine.easeOut, force3D:true }, 0.05); //current solution - (current problem: I have to wait for my "timeArray" values to be updated with values from the 1st tween) var trainElm = document.getElementById('train'); var split = new SplitText(trainElm, {type:"chars,words,lines", charsClass:"char chars++", linesClass:"line++", wordsClass:"word++", position:"relative"}); var charArray = document.getElementsByClassName("char"); var invidDuration = 0.35; var invidEndingDuration = 1.55; var obj = {time:invidDuration}; var staggerAmnt = 0.05; var staggerTotalAmnt = staggerAmnt * split.chars.length var totalTime = staggerTotalAmnt + invidDuration; var timeArray = []; TweenMax.to(obj, totalTime, {time:invidEndingDuration, ease:Sine.easeOut, onUpdate:newTime, onComplete: animateIn}); function newTime() { timeArray.push(obj.time); } function animateIn() { for (i = 0; i < timeArray.length; i++) { var newDelay = i * staggerAmnt; TweenMax.from(charArray, timeArray, { opacity: 0, top: "-5", rotationX: '-180deg', transformOrigin: '50% 50%', ease: Sine.easeOut, force3D:true, delay: newDelay }); } };