Jump to content
Search Community

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

Aleksei test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
Share on other sites

  • Solution

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
Link to comment
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?

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...