Jonathan

Hello @oligsap and Welcome to the GreenSock forum!
 
When the Google bot scans your page for the first time, it reads the source code of the HTML document. So it will read the <h1> text before the JavaScript has generated the new HTML <h1> markup.
 
You can also test your web page using Google web tools like Google PageSpeed Insights and Google Webmaster Tools.
 
Hope that helps  

Hello Human, and welcome to the GreenSock Forum!
 
Be careful when using Chromium KIOSK mode. It will sometimes limit normal JS behavior such as some touch events, some native JS methods, and some default browser functionality. That same type of limitation is sometimes seen in Chromium based browsers when going into fullscreen mode, limiting shortcuts, etc.
 
So this issue resides more with the limitations and bugs of the Chromium KIOSK mode then an issue with GSAP or that Draggable demo page.
 
Here you can see just one of the Chromium bug tickets for KIOSK mode:
 
https://bugs.chromium.org/p/chromium/issues/detail?id=23145
 
Maybe Jack and Carl have some other advice for you regarding this

Hello Monnone
 
The reason this is happening is because you are using negative z-index. As best practice you should not use negative z-index due to this very thing your seeing in Safari. Other browsers have the same issue under different circumstances using negative z-index with transforms. Always use positive z-index values for z-index. Especially when you add transforms in the mix which will give each element a new stacking context and ignore z-index
 
See Stacking Context:
 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 
Adding negative z-index will cause headaches due to the bugs when used cross browser. Also i would recommend to add position: relative to your #mainContainer div so this way your absolutely positioned elements are relative to the #mainContainer as reference point so the browsers know where to calculate from.
 
You also might have to add  -webkit-transform:translateZ(0px); to some of your elements to fix the stacking context on non transformed elements. But i have seen this issue your dealing with and it goes back to using negative z-index with transforms.
 
Also its best to have a default z-index for your position:absolute elements in your CSS so when the page loads the browser will know the initial z-index value to work against. Z-index can be ignored once there is a transform on the same element due to stacking context. 
 

Hello mstudio and welcome to the GreenSock Forum!
 
The reason you get that error is due to the window not being an allowed HTML interface element. That is why getComputedStyle fails:
 
See allowed HTML interface elements in the spec: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#HTML_element_interfaces
 
As a rule of thumb to prevent errors cross browser you should only drag a child of the body element. You could drag the body element and that wont throw an error. But its best practice to leave the body element alone for dragging and drag a child instead. Since when you apply Draggable on the body tag it will apply either transforms or position offsets like top and left. And then you have to set position absolute on the body tag which is also bad practice due to cross browser issues.
 
You can set a child <div> tag inside your body that acts a container wrapper, and use that as your main drag area of the page.
 
So you can do it this way using the body element:
 
See the Pen EWwXRj by jonathan (@jonathan) on CodePen

 
Or drag a main wrapper container instead to prevent buggy behavior from applying transforms on the body element:
 
See the Pen evGRVw by jonathan (@jonathan) on CodePen

 
I hope this helps!

Hello mickFli and Welcome to the GreenSock forum!
 
I believe it is a limitation of all modern browsers, and not GSAP. Not sure why its doing that? I will report this to the powers that be!
 
But in the mean time, instead of trying to change the content CSS property directly with the CSSRulePlugin.
 
Just toggle a class that has that C as the content CSS property
 
See the Pen bqoqpZ by jonathan (@jonathan) on CodePen

 
On Line 56 inside your codepen CSS panel
// change this: tl.set(CSSRulePlugin.getRule('.outer-animation-container .fa-circle-o:after'), { cssRule: { content: "C" } }, 1.40); // to this toggling the className with GSAP: tl.set(".outer-animation-container .fa-circle-o", {className: '+=content-C'}, 1.40); And add the following CSS rule after your .outer-animation-container .fa-circle-o CSS rule to your CSS codepen panel:
.outer-animation-container .fa-circle-o.content-C:after { content: "C"; } Let us know how that works out while i ask why the CSSRulePlugin is not applying CSS content property.
 
CSSPlugin Docs : https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
className
Allows you to morph between classes on an element. For example, let's say myElement has a class of "class1" currently and you want to change to "class2" and animate the differences, you could do this:
TweenLite.to(myElement, 1, {className:"class2"}); And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the "-=" prefix like this:
TweenLite.to(myElement, 1, {className:"+=class2"}); Please standby while we look into this for you

Hello rockmandash and Welcome to the GreenSock Forum!
 
It is really hard to debug your website, and to find out what is going on without testing your code in a live editable environment like codepen. It is highly recommended to provide a reduced codpen demo with the tweens that are causing you issues or blurriness.
 
But having said that, I did notice you are mixing jQuery css() and GSAP. You should really use ether or, so GSAP can keep track of what your animating. For example i see your setting a transform scale with jquery css() .. in that case you should use GSAP set() method so GSAP can record that scale value. Otherwise you are changing transform values outside of GSAP and it will be harder for it to record and keep track of your values.
 
GSAP set() https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/
 
But based on what you describe it sounds like it is a webkit anti-aliasing bug. You can add force3d:false on each of your tweens. And it should have that anyway since your animating SVG, and SVG 1.1 does not support 3D transforms that use matrix3d or translate3d().
 
force3d:false will tell GSAP not to use translate3d() or matrix3d() and then it will use matrix() or translate() to animate with. Webkit based browsers like Chrome and Safari have this webkit anti-aliasing bug that can cause elements to become blurry when having a 3D transform.
 
So for example one of your tweens looks like this:
.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0 }, 0.3)Then add force3d:false on it:.from("#phoneScene01 .svg01Cloud01", 0.6, { y: 100, opacity: 0, force3d:false }, 0.3)Add force3d:false to all your tweens. Then the blurriness should go away.  
If you are still having issues, then please create a reduced codepen issue with the tweens that are giving you issues.
 

 
Thank You!

Hello TeamHype, and Welcome to the GreenSock,
 
Also to add to Pedro's great wisdom,
 
I notice in one or more of your to() tweens you are animating top CSS property. You should never animate CSS position offsets like top, bottom, left, and right. You should animate y instead of top.. and animate x instead of left.
 
CSS position offsets will trigger layout to be calculated on each frame, and will cause bad performance. Animating with CSS transforms like x and y will ensure you animate on a sub-pixel level using hardware acceleration buttery smoothness.
 
I do notice you are also animating width, which like top and left can animate flicker flack due to width not animating on a sub-pixel level and causing layout to be calculated over and over again during the course of the animation. You could add GSAP special property autoRound:false, on the tween animating width, but still width will animate poorly especially if your using scrolling animations will cause everything on the screen to massively repaint. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
 
And like Pedro (Dipscom) advised you should make anywhere you are using opacity and use autoAlpha for better performance. Even when you use set(), See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
 
Also the tweens that you are animating in y. I would suggest to add a slight rotation:0.01 to those tweens GSAP knows to animate them using matrix3d(). Keep in mind that force3d: "auto" is the default so you dont need to have it in your tween. See CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
 
See this article by GreenSocks Jack on CSS Tricks about why animating with CSS transforms are better than CSS position offsets like top and left.
 
https://css-tricks.com/myth-busting-css-animations-vs-javascript/
 
Making those changes will give you better performance.
 
If you are still having an issue, please create a reduced codepen demo example with the tweens giving you trouble. Since debugging your site will be really difficult.
 

 
See the CSSPlugin Docs:
 
https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
 
Even though ScrollMagic is made with GSAP, it is not made by GreenSock. So keep that in mind
 

Instead of an ID i would recommend to target with a class name. Since ID's are only to be used once per element. ID's are unique so basically one ID per element and ID's also share the same namespace as the name attribute, so they have to be unique for each element. And only have one unique ID per web page.
 
Something like:
var rule = CSSRulePlugin.getRule("h3.introh:after"); But make sure your css rule has the same name so GSAP can find the style-sheet CSS selector rule declared above in your rule var.
 
If your targeting multiple elements then just give them all a class instead. The browser usually will fail on targeting multiple elements with the same ID. Either ignoring them all or just applying to the last in the DOM, sometimes the first.
 

Hello thejamespower and Welcome to the GreenSock Forum!
 
Sorry your having an issue.
What version of MacOS? What version of Safari? Basically GSAP adds the rotation via transform attribute if you inspect the SVG with the browser inspector, even though the rotation property would imply using the CSSPlugin. Normally you will see that GSAP is setting matrix() on the transform attribute of the <circle> .. i.e. .. transform="matrix(0,-1,1,0,0,200)"
 
Just to test and see... try and hard code and test the below:
 
Does it still not work if you add the transform rotate() directly on a group element <g> or the <circle> element?
// if you hard-code and add directly to <circle> element to see if Safari is ignoring GSAP rotation <circle cx="100" cy="100" r="80" transform="rotate(-90 100 100)" /> // if you hard-code and add directly to <g> element to see if Safari is ignoring GSAP rotation <g id="circle-parent" transform="rotate(-90 100 100)"> <circle cx="100" cy="100" r="80"/> </g> transform rotate hard-coded on the <g> element:
 

See the Pen GrbLry by anon (@anon) on CodePen
 
or transform rotate on the <g> element set() via GSAP:
 

See the Pen rjEbma by anon (@anon) on CodePen
 
or set transform attribute directly on the <circle> element via GSAP AttrPlugin
 

See the Pen qRzwjq by anon (@anon) on CodePen
TweenMax.set('circle', { drawSVG: 0, attr: { transform: 'rotate(-90 100 100)' }, transformOrigin: 'center' }); x
If you cant see the -90deg rotation in any of my codepens on MacOS and Safari .. please reply back so we can have the Grandmasters Jack and Carl look into this.
 
Resources:
GSAP AttrPluin: https://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/
 

Hello Learning,
 
Part of the reason is because you are using negative z-index -1 on ::after. You should never use negative z-index if you don't want to deal with cross browser shenanigans. You should set higher z-index values that are always positive to prevent this behavior. The reason being is various browsers will treat negative z-index differently and some will ignore or produce buggy behavior like you are seeing. Especially when you start nesting absolutely positioned elements with various negative z-index. which is just asking for trouble.
 
You can just place a default z-index of 2 on your #slide1, #slide2 css rule and give your #slide1::after, #slide2::after a z-index of 1. So you dont have to mess will buggy negative z-index.
 
Plus is there any reason why you are applying your background image as the pseudo -element, instead of just applying each background to each slide div?
 
The opacity is not really opacity but is the alpha transparency of the background-color property, this negative z-index browser bug will cause a background-image to either disappear completely or become opaque when using rgba() for your background-color.
 
I adjusted the z-index for you (only use positive z-index).  I also added rotation: 0.01 to your tweens that are animating xPercent so they animate smoother in Firefox and MS Edge
 
See the Pen LxgQde by jonathan (@jonathan) on CodePen

#slide1, #slide2 { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 5em; color: white; z-index:2; /* add default z-index which is higher than ::after rule */ } #slide1:after, #slide2:after { top: 0; left: 0; z-index: 1; /* dont use negative z-index, only use positive z-index to prevent bg opaque bug */ content: ''; width: 100%; height: 100%; display: block; position: absolute; background: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg') no-repeat fixed center; background-size: cover; }

Try this then for no 2 decimal places
 

See the Pen vgzaPG by jonathan (@jonathan) on CodePen
 
or this:
 

See the Pen bgxzwy by jonathan (@jonathan) on CodePen
 

Hello Daniel.Vintan
 
You can look at this tutorial on adding a javascript item to Visual Studio 2013
 
http://www.howtosolutions.net/2016/05/visual-studio-creating-javascript-project/
 
You can probably find more info
 
https://channel9.msdn.com/Series/Visual-Basic-Fundamentals-for-Absolute-Beginners/02
 

Hello frivolta and welcome to the GreenSock Forum!
 
After some tests it looks like this is being caused by codepen loading assets. Every other page load i see codepen throwing an error on some of its combined js scripts.
 
If i just fork (copy) your pen and view it in full screen mode with no editing panels. The lag goes away:
 

See the Pen rjrWYY by jonathan (@jonathan) on CodePen
 
I was testing on Windows 10 on latest Firefox. I even tested and made your initial elements use translate3d() or matrix3d() in the CSS style-sheet or via GSAP set() method, but codepen would still show the lag intermittently.
 
Does that help?

Hello jiggy1965, and Welcome to the GreenSock Forum!
 
Keep in mind that jQuery has deprecated the load() method since version 1.8 and removed it from jQuery version 3.0.
 
https://api.jquery.com/load-event/
 
So if your using jQuery version 3.0 or higher you can no longer use the load() method.
 
You can either try and use the on() method or bind() method. The on() method is good if your element might not be there when the page loads so jQuery can keep listening for your element.
// using the on() method $(window).on("load", function() { alert("success"); }); // or use bind() method $(window).bind("load", function() {     alert("success"); }); // but i would make sure the DOM is ready first before checking if the window is loaded $(document).ready(function(){ $(window).on("load", function() { alert("success"); }); }); Happy Tweening?

Hello mk1,
 
Here are some typewriter effects using GSAP
 
Typewriter effect using steppedEase
 

See the Pen LbPNvK by jonathan (@jonathan) on CodePen
 
GSAP cursor - loop using SplitText
 

See the Pen avXdvw by jonathan (@jonathan) on CodePen
 
Hope this helps!

Hello Aleksei and Welcome to the GreenSock Forum!
 
The browser support for the <details> and <summary> element is very limited as far as using a custom animation. Only Chrome supports simple CSS transitions on the animation of open and close states, but looks like utter garbage when animating back to a closed state. Firefox and MS Edge do not support animation on the <details> element yet.
 
To access the open and close state of the <details> and summary> element you have to listen for the toggle event based on the open attribute of the <details> element.
See the Pen JEovWr by jonathan (@jonathan) on CodePen
.  
There you might be able to prevent default and add your own custom JS animation. But I doubt that will work since the browser wants full control of the open and close states.
 
The effect of show and hide is natively done in the browser, so its not very widely supported in the spec. And
See the Pen gbJvy by morewry (@morewry) on CodePen
when animated with CSS transitions and CSS animations.  
http://caniuse.com/#feat=details
 
Firefox, IE, and MS Edge only allow none animatable click behavior. Chrome allows transitions
See the Pen gbJvy by morewry (@morewry) on CodePen
and not a very pleasant being very buggy when animating back in.  
You could just stick to not using it if you need it to animate.Since it will only do a simple show and hide with no interpolation. You can just animate a different DOM element since the <details> element only works natively.
 
Here is simple height toggle using other DOM element:
 
See the Pen ggbegG by jonathan (@jonathan) on CodePen

 
if you want a fancy shmancy animation effect then don't use the <details> element. But if you want just a simple show hide toggle with no animation, since animating this element even with CSS is horrible in Chrome. Then use as is, but if you want full control then just animate with JS and don't use this element.
 

Hello Vitaliy Bagmet and welcome to the GreenSock forum!
 
Ok the following should be more smooth and less jitter jank now. Tested on windows 10 lasted Chrome.
 
See the Pen MbBKzZ by jonathan (@jonathan) on CodePen

 
Normally this can be fixed with just a slight rotation, but since it is Chrome it suffers from various browser bugs. Especially when translating text in small increments. Sometimes you have to force Chrome to play nice.
 
Try adding the following 5 CSS properties to your tweens that animate SplitText
translateZ() rotate() transform: perspective() transform-style backface-visibility GSAP syntax of the above CSS properties:
z: 0.01, /* force matrix to matrix3d() and to make smooth */ rotation:0.01, /* offset slightly to make smooth */ transformPerspective: 1000, /* add this to force right perspective even though a 2D effect */ transformStyle:"preserve-3d", /* let the browser know this is 3d effect */ backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */ So it should look like this for those SplitText tweens functions:
function footerSplitFunc2() { var tl = new TimelineMax(); tl.staggerFrom(footerSplit2.chars, 0.75, { transformOrigin: "50% 100%", autoAlpha: 0, scale: 0, x: 20, z: 0.01, /* force matrix to matrix3d() and to make smooth */ rotation:0.01, /* offset slightly to make smooth */ transformPerspective: 1000, /* add this to force right perspective even though a 2D effect */ transformStyle:"preserve-3d", /* let the browser know this is 3d effect */ backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */ ease: Power1.easeOut }, 0.02); return tl; } function footerSplitFunc3() { var tl = new TimelineMax(); tl.staggerFrom(footerSplit3.chars, 0.75, { transformOrigin: "50% 100%", autoAlpha: 0, scale: 0, x: 20, z: 0.01, /* force matrix to matrix3d() and to make smooth */ rotation:0.01, /* offset slightly to make smooth */ transformPerspective: 1000, /* add this to force right perspective even though a 2D effect */ transformStyle:"preserve-3d", /* let the browser know this is 3d effect */ backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */ ease: Power1.easeOut }, 0.02); return tl; } function footerSplitFunc4() { var tl = new TimelineMax(); tl.staggerFrom(footerSplit4.chars, 0.75, { transformOrigin: "50% 100%", autoAlpha: 0, scale: 0, x: 20, z: 0.01, /* force matrix to matrix3d() and to make smooth */ rotation:0.01, /* offset slightly to make smooth */ transformPerspective: 1000, /* add this to force right perspective even though a 2D effect */ transformStyle:"preserve-3d", /* let the browser know this is 3d effect */ backfaceVisibility:"hidden", /* make sure when 3d is applied it doesnt bleed over */ ease: Power1.easeOut }, 0.02); return tl; } I did add a slight rotation: 0.01 to some of your tween that were translating in y or x since that can help in Firefox. But you could also add force3D:true to some of your non text elements tweens to make them use translate3d() or matrix3d() to get more smooth movement if needed.
 
I did not test on retina display (apple 5k) since i do not have one available .
 
I hope this helps!

Hello Again schmolzp
 
This should fix your issue.
 
See the Pen zojeoo by jonathan (@jonathan) on CodePen

 
It wasn't really a GSAP or Chrome bug. Just the way you were using the CSS will-change property
 
Why this happens:
 
The issue in Chrome was that you are using the will-change property Line 20 for CSS rule .photo-item in the CSS panel. So i commented out the will-change property since it will cause more harm then good. So you don't need it!
will-change: transform, opacity; /* will-change: transform, opacity; */ You wont need the will-change property. It should only be used in certain instances as a last resort. And can cause havoc when used.
 
https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
 
The will-change property was being applied to many multiple elements and was causing the clipping of the Polaroid elements towards the end of animating the last several elements. That is why you only saw the clipping and fragmentation of elements rendering to the last elements being animated in.
 
will-change has some rules to its use. So in your case you don't need it since it is causing rendering issues, and your applying it to tremendous amount of DOM elements:
Don't apply will-change to too many elements. Use sparingly. Don't apply will-change to elements to perform premature optimization. Be aware, that will-change may actually influence the visual appearance of elements That is why it was causing your issue.
 
If you need to help GSAP record all your values upfront to improve performance you can start your masterTimline instance in a paused state by setting paused:true
masterTimeline = new TimelineMax({ paused:true /* start timeline in paused state */ }), in your start() function i added the last two methods progress() and play()
.add(beginGroupOne()) .add(beginGroupTwo(), "-=.7") .add(beginGroupThree(), "-=.5") .add(beginGroupFour(), "-=.3") .add(beginGroupFive(), "-=.05") .progress(1).progress(0) /* pre-record values and properties for optimazation */ .play(); /* play timeline */ progress(1) moves the playhead to the end and then back again to start using progress(0) to allow GSAP to pre-record the start and end values.
 
Hope this helps! Happy Tweening

Hello mickFli, and Welcome to the GreenSock forum!
 
I followed your instructions but could not replicate the behavior you are seeing in Firefox.
 
I tried your example in Chrome and did indeed see this behavior.
 
What was going on has nothing to do with GSAP reverse. It has to do with the CSS box model. You were calculating padding and it was pushing the DELETE text span down out of view within your .clip parent.
 
By default <span> elements have a display of inline. You would need to make padding zero on the span and give it display: block property so it fills the entire space of its parent. Also the .chip parent should have a defined height other wise it will grow intermittently when you toggle the click of X and DELETE.
 
Also instead of animating padding which does not animate on a sub-pixel level you should use the x property (translateX). this way it will translate outside the flow of the document.
 
See the Pen zojvva by jonathan (@jonathan) on CodePen

 
See comments in CSS and JS panel. Another way is to also use the CSS property box-sizing so padding doesn't get added inside your box-model.
 
I hope this helps.. more info on the CSS box model found below:
 
Resources:
CSS Box Model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
CSS box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
 

Hello fernandofas, and Welcome to the GreenSock forum!
 
Thanks for sharing
 
If you go to this topic you can see the progression of this bug that started in Chrome 49 and reappeared in Chrome 53.
 
http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/
 
Various solution to fix this bug:
 
This applies to the parent of the element with the bg image:
 
http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65415
 
This applies to the element itself with the bg image:
 
http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65658
 
And the Google Chrome bug report page of this ongoing bug:
 
https://bugs.chromium.org/p/chromium/issues/detail?id=596382&can=2&start=0&num=100&q=chrome%2049&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=
 
Happy Tweening

Hello NeedHate, and Welcome to the GreenSock!
 
It looks like you were triggering a timeline to play and then immediately restart it. Its better to just create one timeline for each element and then simply play and reverse the animation.
 
When applying a timeline to multiple elements its best to just create a timeline in a paused state. And then in the loop store the timeline in each DOM node. This will associate each timeline with that element that is hovered. Then play on rollover and reverse on rollout.
 
See the Pen ZBBrRv by jonathan (@jonathan) on CodePen
 
You can see other examples below that apply timeline to multiple elements inside a loop
 
http://codepen.io/jonathan/pen/KdYqWo
 
http://codepen.io/jonathan/pen/rOgVEd
 
Hope this helps, Happy Tweening

hello flysi3000,
 
I checked on iPad Air - iOS latest but did not see this issue.
 
But this looks like an issue with z-index stacking order issue. You should also add a z-index to your other elements that use position: absolute. The first time i looked you had no z-index, but looks like you added a z-index on the border div.
 
Also you can try add the following on the element you are transforming. That helps with known Safari bugs that cause flickering.
-webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; backface-visibility: hidden; transform-style: preserve-3d; If that doesnt help you might have to bring the border div on its own rendering layer so it can go above your transformed element.
 

Hello Ledtobias and welcome to the GreenSock forum!
 
Here is that same effect using the same HTML markup and CSS.. minus the CSS animation @keyframes, but animated with GSAP.
 
See the Pen LbPNvK by jonathan (@jonathan) on CodePen
 
And this example:
 
See the Pen avXdvw by jonathan (@jonathan) on CodePen
 
It uses the GSAP SteppedEase ease
 
http://greensock.com/docs/#/HTML5/Easing/SteppedEase/
 
With SplitText that would take some planning to make sure all the split div tags parent width is animated and centered via margin auto. Or by only animating the parents transform negative translateX (x property in GSAP) value on every animated step. while animating the width.
 
But there are many ways to use SplitText to accomplish this.
 
Keep in mind that example uses ems sometimes different browsers might render different due to inherited browser defined stylesheet. And since it's using a web font that might need you to declare other CSS properties for your font text so it looks consistent across all modern browsers.
 

Hello, majofski
 
Is there any reason why your dont have the below variables that are inside your click event handler, defined outside the click event?
recipientContainer = $('#search-container') recipient = $('#reveal-recipient-search') recipient = $('#reveal-recipient-nav') Since they are just simple selectors so they can be defiend outside your click event handlers . Also they are missing the var so you can define them as variables.
 

Hello  crabcreative, and Welcome to the GreenSock Forum!
 
You could try and add data-clickable="true" to the elements you still want clickable.
<a href="http://www.google.com" data-clickable="true">Test Link</a> Please see the Draggable Docs:
 
http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/
dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true. Does that help?