Animate initially hidden div?

[NubieHere]

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?

See the Pen wdpdao by blaasvaer (@blaasvaer) on CodePen

[PointC]

Hi @blaasvaer

 

Your pen was using an opacity tween, but you said you don't want any sort of fading so your from() tween should work just fine. Here's a fork of your pen.

 

See the Pen xdpdge by PointC (@PointC) on CodePen

If you do want something to be hidden and then fade in, it's best to set the visibility to hidden and/or the opacity to 0. Setting display to none can cause some issues. Using opacity and/or visibility, you can animate them in via autoAlpha which is a hybrid of those two properties. You also don't need the CSS wrapper on those tweens.

 

Hopefully this helps. Happy tweening.

 

 

[NubieHere]

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.

[NubieHere]

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

[NubieHere]

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

[PointC]

I think you'll find most people load TweenMax via a CDN. This is advantageous because you get the benefit of caching and it loads all the most commonly used plugins including the EasePack. TweenMax loads:

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax
• CSSPlugin
• AttrPlugin
• RoundPropsPlugin
• DirectionalRotationPlugin
• BezierPlugin
• EasePack

Sorry to hear that you are experiencing frustration. If you do have additional questions as you proceed, we'd be more than happy to assist you. 

 

Happy tweening.

 

[NubieHere]

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.

[GreenSock]

Sorry about any confusion/frustration. This is pretty unusual for us to hear this type of thing - most of the time, folks tell us that the more they use GSAP, the more they fall in love. I feel badly that you were disappointed. 

 

If it helps, I think you were looking for something like this: 

See the Pen 552b27d9cda26d2e3b89c538d4882f21 by GreenSock (@GreenSock) on CodePen

Does that make sense? And like @PointC said, it's usually best to simply use autoAlpha instead of opacity plus display. In other words, if you just animate to autoAlpha:1, it'll make opacity go to 1 and visibility will be toggled to "inherit", and if you animate to autoAlpha:0, it'll go to opacity:0 and visibility:hidden at the end. 

[anthonygreco]

@blaasvaer I would definitely suggest coming back to GSAP when your mind is fresh. Let's be fair, we've all done this... Find something amazing, want to integrate it ASAP, and can get discouraged due to a whole slew of reasons (deadlines, frustrations, that horrible thai food you ordered last night) and fall back to our roots. (jQuery in this case... don't lie people, we've all done this one!!  though maybe no so much lately )

 

Anyway, IMO GSAP can be as simple or as complex as you make it. There's a lot that can be done; GSAP is powerful, but it can also be the simplest tool too. If there's any one thing I could recommend to a newcomer it would be to (and frankly this goes for any new software/framework) simply browse the API Docs. Not when you have a project to build, but when you have time to devote to learning a new technology. Again, we're all probably at fault there too... lol. Not trying to assume you haven't or won't do these things, just my two cents.

 

FWIW, here's a very straightforward "width" based solution similar to what you described in jQuery. Though some assumptions were made, (e.g.  it wasn't very clear if the nav should push content or if it should "overlay" like it was a hidden sidebar nav, I assumed the later) it should be easy to follow.

 

See the Pen MmrGRE by anthonygreco (@anthonygreco) on CodePen

 

Worth noting though is that animating width isn't the best we can do in regard to performance. Take a look at how @OSUblake takes advantage of transforms to accomplish a nearly identical effect in this codepen:

 

See the Pen 6646d7d2b5ba66947cee139bd7a4ff55 by osublake (@osublake) on CodePen

 

Also, another great part of GSAP.... you're in it right now.  So many of these guys have helped me learn a lot about GSAP.

[NubieHere]

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 : )

[GreenSock]

Glad you got some sleep and are feeling better! 

 

Yeah, this really is a special community. Folks around here are genuinely kind and helpful. I've seen plenty of online communities that are filled with snarky, critical, arrogant folks who seem to look for excuses to make you feel dumb. Not around here. 

 

Nice to have you on board.