NubieHere

I don't know why I always end up in an extremely complicated setup when trying to do very simple stuff (stupid, maybe?) HOW, do I simply fade out all characters of a text (in any given element) one by one ... then, when done change text (not visibly) ... then fade in the new characters of the new text one by one. Fade in, fade out, fade in, fade out, wax on, wax off, wax on, wax off ... I'm doing stuff like this: ``` function swapText ( element, content ) { var myText = new SplitText( element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:0, stagger: 0.02, onComplete: changeText, onCompleteParams: [ { element, content } ] }, "+=0"); } function changeText ( params ) { // How do I start out with an invisible text that I can fade in? $( params.element ).html( params.content ); showText( params ); } function showText ( params ) { var myText = new SplitText( params.element, { type: "words, chars" } ), tl = gsap.timeline(), chars = myText.chars; tl.to(chars, {duration: 0.1, opacity:1, stagger: 0.02 }, "+=0"); } ``` Which becomes overly complicated ...

So, finally isolated the issue, and as expected. No problems. The only thing that's left now, is wasting a good chunk of life to hunt down bugs in poorly organized code … seriously don't know why I'm still in this business.

As said, I'm about to completely isolate it. But being a Wordpress solution using SASS, it's a pretty nightmare to extract the relevant code.

Yes, I was aware of that. And that was removed. But the problem persists. Unfortunately.

Thanks, but that seems to not be the case. I'm pulling all relevant code out of the spaghetti it's in at the moment to create an isolated version. To see if that can get me any closer. But there's really not that much going on in this case, as you can see in the above CSS and JS (further up the post).

Erm, thanks. But I do know that. This was just partial code to illustrate that it didn’t have anything to do with () at the end. The issue isn’t solved, but has to do with some weird height behaviour of some kind. But you can only spend so much time trying to figure weird stuff out. And then think of another solution.

It must have something to do with WHEN GSAP thinks the height is 0. Just don't know what ...

Well, I'm sure you're right. 'Cause that behaviour would be what I would expect. But I simply cannot figure out what part of the 'height' is causing this ... This is the css for the menu container: .menu-my-main-menu-container { display: block; position: fixed; background-color: pink; width: 100%; height: 0%; overflow: hidden; z-index: 2; ul#primary-menu { padding: 10% 15%; li { a { font-size: 1.25em; font-weight: 100; line-height: 2.5em; text-transform: uppercase; color: $black; text-decoration: none; } ul.sub-menu { display: none; position: relative; left: 10%; top: 0; @media screen and (max-width: 800px) { position: relative; left: 5%; } li { a { color: $black; } } } } li.inactive { a { color: lightgrey; } } } }

I agree, unless you see all the code it's hard. But sharing a complete wordpress website seem overkill. And picking out the parts will become an umanageable nightmare. So, there we are ; )

Yes, I've been playing hundreds of .mov files from my server. But just today I cannot play this exact one – I'm in a tech black hole today I'm afraid – uploaded a 720p version. http://www.blaasvaer.dk/oncomplete_720p.mov

I changed to close time to 5 sec. for being able to see what's going on. If I animate the height property with GSAP it doesn't work. But if I do it in the inspector it behaves as expected (do not disappear before complete collaps). It's as if if fires the second the container hits the content. See it in action here: http://www.blaasvaer.dk/oncomplete.mov

It'll probably take half a day to 'remove' the code from the context. I will record a video to explain further, as I thought it had to do with the nested elements being 'moved around' by the 'collapsing' height. That seem not to be the issue, but rather 'when' gsap fires the 'onComplete' handler ...

This is the entire class, nothing fancy going on: class Navigation { constructor () { this.addEventListeners(); } addEventListeners () { let _this = this; let logo = $('.logo'); let nav_icon_burger = $('a.nav_icon.burger'); nav_icon_burger.on('click', function ( e ) { e.preventDefault(); e.stopPropagation(); $(this).toggleClass('open'); if ( $(this).hasClass('open') ) { open_main_menu(); $('body').addClass('no_scroll'); } else { close_main_menu(); $('body').removeClass('no_scroll'); } }); function open_main_menu () { if ( window.matchMedia( "(max-width: 840px)" ).matches ) { TweenLite.to('.menu-my-main-menu-container', 0.35, { left: 0, height: "100%", ease: Power1.easeIn} ); } else { TweenLite.to('.menu-my-main-menu-container', 0.35, { height: "100%", ease: Power1.easeIn} ); } } function close_main_menu () { nav_icon_burger.removeClass('open'); TweenLite.to('.menu-my-main-menu-container', 0.35, { height: '0', ease: Power1.easeIn, onComplete: hideMenu } ); } function hideMenu () { $('.menu-my-main-menu-container').hide(); } } } export default Navigation;

Ok, but I have this, and it still fires immediately: function close_main_menu () { TweenLite.to('.menu-my-main-menu-container', 0.35, { height: '0', ease: Power1.easeIn, onComplete: hideMenu } ); } function hideMenu () { $('.menu-my-main-menu-container').hide(); } What am I doing wrong?

One of the things that keeps bugging me about GSAP is the fact that I don't know what each 'Tween <Lite, Max ... etc >' is capable of out of the box. When do I have to add whatever random plugin to be able to do certain stuff. Now, I was fiddling around with the easings of a TweenLite ... but no matter what I put it nothing really seemed to change. Then I though, »Well, maybe I can't even do that without some plugin?«. Could I for instance just slam: ``` ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false }), y: -500 } ``` to the ease property of a TweenLite? If not, how would I know? Is there any place somewhere on this site – the docs maybe – where I can get a complete overview of what each 'package' it capable of out of the box, without any plugins? If not, then I'd suggest that feature to have.

Funny, now after posting I wanted to make a screen recording to show the issue. And it suddenly works. I did however notice a veeeeeeeery long initial background page load (dependencies loading via xhr I suspect), and the basic clearing of the search and the like wasn't working until after a while. Now, could it be that the load process of external libraries could cause the issue more or less randomly?

Just tested on Mac OS X Sierra 10.12.6, Firefox 59.0.2, and the behavior seems to be the same. Now, either it's just not working at all, or I'm not getting the point of how the search is supposed to be working ... which would be sad after 23 years of surfing the web. No matter what I type into the field the 'result' never change (well, the string that says »Search results for <search term here>« does, but that's it). Now, I don't know what is supposed to happen if I type in something in the search field, but I would »expect« that either the number of »boxes« would change, or the boxes them selves would change (that is, the result of the search).

Firefox 58, Mac OS X, El Capitan 10.11.1: not working ...

Thanks a lot for that. But how come I have absolute no clue where to find that information on this site ... absolutely none?

When I type in words in the search field on the learning page, the spinner shows up and the input field resets to the default text. The result is always the same, nothing changes. No idea, where else to post this.

Is the textplugin free to use? How do I get it?

That's exactly what I'm looking for, thanks a bunch.

Is it possible to scramble text from one word into another using, say, a loop and an array of strings? And if, then how would I do that using the ScrambleText plugin? I mean letter by letter one at a time. It seems the initial text is immediately replaced by characters from the options object, and then from there on scrambled.

Thanks a lot. I'll give that a shot.

Thanks, but those are just typos. The code is running, but just acting weird. I actually think it may have to do with the animation being retriggered on every scroll event. Will try to check for isTweening() or the like ... but not until tomorrow ; )