Jump to content
Aleksei

How to set Display to "none" after transition is complete?

Recommended Posts

Hi, guys!

I'm new to JS and GSAP and need some help.

I'm trying to make quite a simple thing: hide login form with opacity transition. But if you make it like this:

TweenMax.to(".plate", .3, {opacity: 0});

...it just makes the form window transparent, but not hide it — you still can roll mouse over "close" button and over the input field and see how the cursor changes the shape.

I  have to set display: none; property after the animation is finished. And when I do it like this, the animation doesn't work:

TweenMax.to(".plate", .3, {
    opacity: 0,
    onComplete: function() {
        TweenMax.set("."+type, {display:none});
    }
 });

On top of that, the browser detects this JS as it has a syntax mistake, because when I load HTML page none of JS works on the page.

 

Maybe I'm doing something wrong? Please, help to solve the issue.

 

P.S. Is there any forum search? Couldn't find "search on the forum" button.

See the Pen RRRzgY by nordskill (@nordskill) on CodePen

Share this post


Link to post
Share on other sites

Hi Aleksei :)

 

Welcome to the forums.

 

Unless 'none' is a variable, there is a slight error in your set() code. You'd want:

TweenMax.set("."+type, {display:"none"});

In this case though, I think autoAlpha could work well for you. It's a combination of opacity and visibility. Once opacity hits 0, the element is automatically set to visibility:hidden. It's quite handy for this type of situation. 

TweenMax.to(".plate", .3, {autoAlpha: 0});

You can read more about autoAlpha here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

There is a search button on the upper right. Just click the little magnifying glass and you can search for whatever you need.

 

Hopefully this info helps a bit.

 

Happy tweening.

:)

  • Like 4

Share this post


Link to post
Share on other sites

The reason you are getting a syntax error is because none is being treated as a variable, when it's supposed to be a string, or a variable with a string. Again, autoAlpha is useful here.

  • Like 1

Share this post


Link to post
Share on other sites

Thank you, PointC, this works great!

 

Now I have a general question.

When I was working on the animation I noticed that there is a jQuery linked to the HTML:

 

b6df273a371f42d3a975e11328cf101e.png

 

I thought that I can delete it any time later, because as far as I know GSAP can work without jQuery. And I removed it. And animation stopped working.

So does GSAP work with jQuery or it can work without it?

Share this post


Link to post
Share on other sites

Nope - GSAP is not dependent on jQuery at all. You can remove it.

 

The reason your code is breaking when you remove it is because your hide & show functions are relying on jQuery to check the width. You can change those to vanilla JavaScript like this:

// change this
if ($(document).width() > 933)
// to this
if (document.body.clientWidth >933)

If you're trying to get away from jQuery, here's a website you may find useful:

http://youmightnotneedjquery.com/

 

Happy tweening.

:)

  • Like 4

Share this post


Link to post
Share on other sites

Now I see. Unfortunately when I search for any function in Google very often I find solutions related to jQuery by default. And I'd like to make my sites without it, because from my user experience: jQuerry is very slow.

Thanks again! :)

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.