NubieHere

I have a logo split into three parts. And wan't to make some parts disappear (and reappear) based on scroll. But the animation is acting totally weird (not doing the thing I ask it to – yeah, I know it does. But the logic kind of always goes out the window with this). (couldn't make codepen, jsfiddle or js bin work due to the scroll ... ) But this SHOULD be fairly simple. Make some part disappear, and have the container move up a bit after a delay, and the reverse ... let duration = 1; $window.scroll(function () { if ( $window.scrollTop() > 200 ) { TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 0, ease: Power0.easeNone } ); TweenMax.to('.logo', duration, { top: '-50px', ease: Power0.easeNone, delay: duration } ); } else { TweenMax.to('.logo', duration, { top: 0, ease: Power0.easeNone } ); TweenMax.to('.logo span.one, .logo span.three duration, { opacity: 1, ease: Power0.easeNone, delay: duration } ); } }); I simply don't get why the animation seem random; showing, hiding, moving up and down. Never ending in a state expected. Anyone got any idea what I'm missing (again)?

Hoo Crappin Ray! Amazing what 5 hours of sleep (and a couple of nice people in this forum – you know who you are), after 18 hours of work, can do. Thanks guys, you saved my faith in GSAP (well, it didn't really go away – frustration just took over for a while). This seem like a nice place : )

But I'm also trying to keep the load at a minimum. Ended up doing this: $(this).toggleClass('open'); if ( $(this).hasClass('open') ) { $('nav.main-menu').animate({ width: "55%" }, 500, function () {}); } else { $('nav.main-menu').animate({ width: "0" }, 500, function () {}); } Sadly. But why spend an evening fighting GSAP, when done in jQuery in literally seconds. : ) I guess I'll come back when I've not been working for 18 hours in one seating. But thanks anyway.

OK, going to use jQuery for this (again). GSAP is way to frustrating to get working.

I also get: ReferenceError: Elastic is not defined - in the browser. And I »GUESS« that I should load easing/Easepack.min.js ... Where is there a referece table of which functionality require what file to load? Now THAT would be nice ...

Hey PointC, thank you. But that's exactly my point with Codepen. You make a super simple version of what you try to achieve, and then when implementing it in the real world scenario nothing is working out as expected (due to ALL the other elements used which would blow Codepen off, not making any sense). I simply cannot make this fairly simple stuff work on my site ... argh.

How do I animate the width of an initially hidden div? The width of the div is already calculated using: calc(50% + 141px); I wan't it to go from a width of 0 to the calculated value I'd like to do: TweenLite.from('nav.main-menu', 1, { css: { width: '0px)'}, ease: Elastic.easeOut } ); or (from 0): TweenLite.to('nav.main-menu', 1, { css: { width: 'calc(50% + 141px)'}, ease: Elastic.easeOut } ); But, as you guessed, that's not going to happen. What am I missing? (I've loaded both TweenLite.min.js and CSSPlugin.min.js.) I don't want to have the visibility fade in in any way. How would I achieve this in the easiest possible way?

Seems like my 106 KB file became 588.75 KB after visiting your server ... hmm. In the above, I was referring to the file I exported from Photoshop (to show the problem). And what I meant was, that the file that I exported from Photoshop, had a filesize of 106 KB coming out of Photoshop. But after uploading it to your servers, it had gone up to 588.75 KB, according to the file preview you provide. It was only a concern because you stated that only downloads smaller than 500 KB was allowed. So: maybe you should have a look at your image crunchers you use when uploading files ... so all in all this was just an attempt to provide some user feedback.

If you take a good close look at the file I've attached, you'll see, that the white download box is not white at all (try comparing it with your own attached file). The semi transparent black overlay is ABOVE the download box making it impossible to click it. The »Not logged in« and »Logged in« was just to show that it didn't matter whether I am logged in or not ... do you seriously not see the problem? I haven't made any edit to the color of the image. It's as it appears in the browser (please, ignore the »Not logged in« and »Logged in« texts). The OVERLAY is ABOVE the download box in ALL cases. So therefore I cannot click it ... and I'm pretty sure you didn't mean to put it above in any case anyway.

I haven't used GSAP in a loooong time. So it was simply the annoyance of having to do a lot of searching (googling that is) ... to actually get things working. All instructional videos seem to be about TweenMax, but if size is a concern one maybe wish to use TweenLite. But figuring out the limitations of this just seem hard to find. So some information on what TweenLite can and especially cannot do out of the box ... Still think a matrix would be great ... : )

See attached file for info. Seems like my 106 KB file became 588.75 KB after visiting your server ... hmm.

I have to go into the dev tools to hide the overlay to get to the download button ...

I can't seem to find any information on what plugins I need to activate for doing specific things with TweenLite. Could someone point me to where (as I assume it exists somewhere) the matrix for features and the needed plugins are? I'll give you an example: I wan't to animate, let's say the »top« property, then the matrix tells me; »Oh, then you need to enable the CSSPlugin; and by the way here's how you do that (so you don't have to spend hours and hours googling this stuff ...)«! And what plugin do I need to activate for easing? Anyone?