Show / Hide Elements

[1DMF]

Why can't I animate show a hidden element?

 

What am I missing?

 

Thanks,

1DMF

[Rodrigo]

Hi,

 

Is hard to identify the issue with the information you just provided, which is very little.

 

Without knowing the specifics of your scenario is rather hard to help, but you could try with autoAlpha in the tween vars. I'm going to presume that your element has a display:none in it's css. What you could do is the following:

TweenLite.to(element, time, {autoAlpha:1});

But again I'm just guessing here. Please take a look at the following post so you can learn how to create a reduced sample, which always allows us to solve issues a lot faster:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[1DMF]

Thanks, that's exactly what I meant : display:none;

 

I had typed a huge post, example code the lot, then when I submitted I got a page can't be displayed, and when I clicked back the entire post was lost.

 

I wasn't going to type it all out again, so that's why my post was so sparse.

 

Very annoying forums that behave in this manner!

 

Anyway doesn't work?

 

And why doesn't copy/paste work, I'd love to show you the code, but this forum won't let me?

[Rodrigo]

Mhh... my server side knowledge is very limited, embarrasing to use a better word so I can't say why that happened.

 

Also reading a post with lots of code in it makes helping users slower, like I said in my previous reply is easier to see the code working in a real sample in codepen, so I encourage you once again to take a look at that post and the great video Carl made in order to show how simple it actually is to create a codepen. Also a codepen basic account is free and allows you to fork any codepen from other user in order to change it to what you need/want to do.

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[Jonathan]

Sorry your having issues...

 

To add code in a forum post:

1. Look for the wysiwyg code icon that looks like <> .
2. A modal popup window will appear.
3. Choose what type of code you are pasting
4. And then paste your code in and click ok.

Then your code will look like this:

// My code will go in here
var myVariable = "Happy Time";

And just like Rodrigo advised.. a codepen demo is really helpful.

[1DMF]

I can't get anything to work!

 

I can't even get this stupid forum to work. I tried to use the URL icon, the popup box once completed won't submit and it won't cancel either, I got stuck with a modal popup that wouldn't go away and lost everything I had typed... AGAIN!

 

They wanted this splash screen to go live today, but no chance!

 

I have created a test URL : https://www.homeloanpartnership.com/test.html

 

I can't get any hidden element to show using autoAlpha or anything else other than JQuery's obj.show();

 

Then I can't get the 'left' to animate , nothing moves, nothing displays?

 

I'm stumped. Also I have some other animation that rotates a legend on a form, it works in FireFox , doesn't in IE.

 

I guess GSAP & this forum isn't IE11 compatible?

[Jonathan]

As Rodrigo has advised you need to add autoAlpha since nothing is being displayed since your starting display property is set to none. So the p tag was animating left but was invisible because of the initial display property.

function showit()
{
    var wt = $("#pwait");
    var tl = new TimelineLite();
    //wt.show();
    tl.to(wt, 1, {autoAlpha:1,left:"300px"});
} 

I just posted this code in IE11 .. IE11 keeps forcing the code box to be above any text written, so you have to drag the code box where you want it. And to edit the code after you click the modal ok, you have to double click the code box to edit.

 

This is a great forum!.. Sorry you are having those issue in IE11, maybe you should use Firefox or Chrome when posting your code.

 

[Rodrigo]

Hi,

 

As I understand the frustration of something not working with a deadline looming on the doorstep, this is not the place to vent. We haven't received another complaint about the forums with IE11.

 

In terms of your code there are a couple of things. Your element doesn't have a position, therefore left, top and margins won't have any effect. It should have a relative or absolute position. Since you're talking about a splash screen I'd recommend absolute. Also I made a mistake, autoAlpha changes the opacity and the visibility properties, not display, sorry about that.

 

I set up a codepen using your code:

 

See the Pen mpyad by rhernando (@rhernando) on CodePen

 

Please fork and adapt it to meet your scenario.

 

Rodrigo.

[1DMF]

 

 

As I understand the frustration of something not working with a deadline looming on the doorstep, this is not the place to vent.

 

Hey Rodrigo, I'm sorry if you feel I was venting, I wasn't. I have dyspraxia and express myself differently, something I was born with and cannot change, please do not take my posts in the wrong way, as I know I can be blunt (I have been told), it's just how it is which I will have to live with for the rest of my life!

 

Anyhow, I can confirm you forum doesn't work properly in IE11, I just came here from freshly booting my PC, tried to copy/paste the quote nothing happened, put IE11 in compatibility mode, copy/paste is now working.

 

The same with the code box yesterday, it wouldn't close, cancel, nothing, click the button , nothing would happen and as the popup is modal, it trashed the entire page.

 

On to the problem at hand...

 

Little confused you say the element has no position; elements have a default position of 'static' don't they?

 

So are you saying every element I want to animate must be forced to either absolute or relative positioning?

 

If autoAlpha doesn't affect the display property, what can I use to make an element visible with GSAP, or do you have to set the display property before you can see any animation?

 

Lastly any idea why animation would work in FireFox but not IE? , I got the impression cross-browser compatibility was dealt with by GSAP, and so if it works in one browser, it should work in them all.

 

Having done a little investigating, it seems it works in IE11 in normal mode but doesn't in compatibility mode, here is a test page for you to see for yourself.

 

https://www.homeloanpartnership.com/IE11_test.html

 

It does look like there are issues with IE11 and GSAP  (including the website), and it seems switching between compatibility mode doesn't help because it fixes one issue but causes another, so you can't win

 

At least I have a better handle on what's happening and why and can work with it to finish the desperately wanted splash screen. The usual scenario, they have known about these new training courses for weeks, then in a desperate panic need a booking splash screen for the members extranet, because the courses start in a week, why is IT always left with the least amount of time to do the most complex part of the job?

 

Oh as an aside, I can't get that codepen link to load, I had trouble with a few of the demos as well, probably IE11 related also!

 

I have no doubt this forum is great, I have had quick, friendly replies to my noobie posts, and that's what makes a forum great, not the fanciness of the GUI, or the amount of pointless, mostly unused features, it's the people who frequent them and the help they give that makes a forum great, and so far I totally agree with you GSAP looks awesome, it has an active , helpful community... functionality is more important than form, a GUI that has form over function is not useful and probably created by M$

[jamiejefferson]

display is also a 'tweenable' property - it will smartly toggle display at either the start or end of a tween i.e

TweenLite.to(foo, 1, { display: 'none' }); // sets display at end of tween

TweenLite.to(foo, 1, { display: 'block' }); // sets display at start of tween

Add that as another property in your autoAlpha tween and you should have better luck.

 

 

position: static is the default for all elements, and with position: static an element will not respond to top/left/bottom/right styles (hence why we usually say the element has "no position"). You really do need to set position: relative/absolute/fixed to apply top/left/bottom/right styles.

[1DMF]

Perfect Jamie, many thanks.

 

I did actually try the 'display' property late last night, but I failed to quote the word 'block', and so was getting errors due to incorrect syntax.

 

Knew it had to be something simple , just couldn't put my finger on it, and was then sent on a bit of a tangent with the 'autoAlpha' setting.

 

Got there in the end

[Jonathan]

1MDF,

When testing in IE11 .. that browser should NOT be in compatibility mode. Compatibility mode in IE is only used to make older malformed websites render right. Compatibility mode will break well written websites. Anytime using IE, even IE11.. you should NOT be in Compatibility mode and should have the Document mode set to IE11 Standards.

IE11 Standards Mode is what you want.. that makes sure the page renders correctly.

Once you have the correct rendering mode in IE11, than just as we have described, you must have position relative or absolute on your element in order to animate left and top properties. And also you must animate the display property like Jamie advised or use autoAlpha like Rodrigo described, to show your element.. that is do to having display none in your style sheet.

I hope that helps.

[1DMF]

Hey Jonathon,

 

Thanks for the info, helps to know the position property requirement for any 'movement' animation using left/top;

 

Re IE11, I know, and I do use 

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

to try to force the browser to use highest available standards mode as I test and try to write mark-up  to latest standards and well formed, don't get it right 100%, but it is my aim.

 

However, I have no control over other people's browsers and the compatibility setting, even MS have IE11 default to all intranet sites running in compatibility mode, which screwed all our internal system because they work properly in normal mode and not in compatibility, as you say it breaks things!

 

The other issue is the industry I am in, the providers / insurers / lenders are always out of date and fail to work on the latest browsers in standards mode, so many users default all websites to run in compatibility mode, which is not very helpful.

 

Clearly putting IE in compatibility mode is not the same as saying pretend you are version XYZ, because I have seen code that runs in IE 7/8/9/10/11 fine, but not  in compatibility mode. 

 

I have the main animation and display working in all modes, the bit that doesn't in IE11 compatibility mode is a wobble effect on the fieldset and the rotation on the legend... eye candy for those it will work on, and no big deal if it doesn't!

 

Really appreciate everyone's input and support, thank you.