Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Lucifer765

After Showing a object i want to hide it back smoothly using tweenmax

Recommended Posts

Hi!

Im new in gsap. I have an object in css. Initially i hide this object using display none & opacity 0 in css. Now in animation i want to show the object for a few seconds & hide it back smoothly. Now i have done the show animation using tweenmax. But the problem is, I cant hide it back smoothly... Can u give me any solutions?

//CSS
#skills .screens .small-box #hide {
    display: none;
    opacity: 0;
    visibility: hidden;
}
 
//Javascript
var show_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, {
            delay: 2.5,
            display: "block",
            opacity: 1,
            visibility: "visible"
        });
Link to comment
Share on other sites

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

 

I also noticed that you are using deprecated syntax. Check out the migration guide here.

 

https://greensock.com/3-migration/

  • Like 1
Link to comment
Share on other sites

You could .reverse() your animation. Is there a reason you're toggling display from none to block? That's generally bad for performance because it forces the browser to reflow. In some rare cases that's what you want/need, but typically I just set visibility: hidden and opacity: 0 in the CSS and then simply use autoAlpha (which toggles visibility AND affects opacity):

// show:
gsap.to('#skills .screens .small-box #hide', {duration: 2.5, autoAlpha: 1});

// hide:
gsap.to('#skills .screens .small-box #hide', {duration: 2.5, autoAlpha: 0});

Like Cassie said, a minimal demo will go a long way to getting a solid answer :)

 

Happy tweening!

Link to comment
Share on other sites

Hi @GreenSock Thank you for your replay..... Actually my code is huge thats why im finding difficulties to give u a minimal demo. By the way u are adding gsap.to here... But i did all of my code using TweenMax.to. 

Now my questions are....

1. Will there be any problem/error if i put these two together? I mean gspa.to and tweenmax.to?

2. If i want to do this using tweenmax.to, then can i do like this?

//show
var show_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, {
            delay: 2.5,
            opacity: 1,
            visibility: "visible",
  			autoAlpha: 1
        });
//hide
var hide_cont = TweenMax.to('#skills .screens .small-box #hide', 2.5, {
            delay: 2.5,
            opacity: 1,
            visibility: "visible",
  			autoAlpha: 0
        });

 

Link to comment
Share on other sites

  1. In GSAP 3, everything is simplified - there is no more TweenMax, TweenLite, TimelineMax or TimelineLite because they're all consolidated into a "gsap" object. But we put aliases in place so that for now, things like TweenMax.to() work because they're mapped to gsap.to(), for example. So yes, it would still work but I'd strongly recommend updating your code to the modern syntax. At some point in future versions, we'll drop support for the old syntax (probably at least a year or more before we do that, though). See 
  2. Your code doesn't make a lot of sense because you're duplicating a lot of things and even using conflicting values. Keep in mind that autoAlpha is just a shortcut for controlling BOTH visibility AND opacity. So it's pointless to do this: {opacity: 1, visibility: "visible", autoAlpha: 1}. All you need is {autoAlpha: 1}

    And your second tween is actually conflicting: {opacity: 1, visibility: "visible", autoAlpha: 0} is telling opacity to go to 1 AND 0 simultaneously. And visibility to "visible" and "hidden". See what I mean? All you need is what I originally suggested - {autoAlpha: 0}. Done. 

As for creating a minimal demo, the entire point of that is to isolate things which is really a good habit to get into whenever you run into problems in your code. If you have a super complex site where your tween isn't working, just isolate that in a CodePen or something and then keep adding layers of complexity until it breaks so that you understand the step that caused it to break. We don't want you to post all your complex code here - just a minimal demo

 

Good luck!

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