[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.

 

 

[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.

[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.

[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.

[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);

 

[SVG mask tween - flicker]

Thank you

[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

See the Pen dGGzBe by tyelrx (@tyelrx) on CodePen

[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

 

[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.

[ScrambleTextPlugin Sample page not working???]

Is it just me or is the code on your page for ScrambleTextPlugin not working.

 

 

https://greensock.com/ScrambleTextPlugin

See the Pen by ScrambleTextPlugin (@ScrambleTextPlugin) on CodePen

[GDN + GSAP, HTML5]

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
 

[Ease duration in .staggerFrom]

Rockstar, didn't know about .seek

 

thanks

[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);
        }

[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
                });
            }
        };

See the Pen Wvvyzg by anon (@anon) on CodePen