Jump to content
GreenSock

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

TweenLite.From issue, target opacity still visible

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

hello all,

 

I am learning GSAP with the GSAP tutorial book I purchased from Nobledesktop, so far so good but I am running into an issue in one of the exercise. Basically, using TweenLite.from, the opacity of the target still visible for fraction of a sec before the animation starts, I want to fix it so that when the animation runs, the target is not visible, as intended by using TweenLite.from. I did a search and saw a thread that suggest using TweenLite.render(), but that didnt help me.

 

Below is the HTML (I added the zip file for the exercise):

 

<!DOCTYPE html>
<html>
<head>
    <title>2D Transforms</title>
    <style type="text/css">
        body {
            background-color:#041218;
            color: white;
        }
 
        .panel {
            position: relative;
            background: url(img/gradient-bg.jpg);
            width: 700px;
            height: 400px;
            margin:50px auto 0 auto;
            overflow: hidden;       
        }
 
        .clapper {
            position: absolute;
            width: 295px;
            height: 225px;
            left: 32px;
            top: 105px;
        }
 
        .clapper-top {
            position: absolute;
        }
 
        .clapper-bottom {
            position: absolute;
            top: 30px;
        }
 
        .panel h3 {
            position: absolute;
            left: 350px;
            top: 100px;
            font-size: 60px;
            font-family: Arial, Verdana, Helvetica, sans-serif;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="clapper">
        <img class="clapper-top" src="img/clapper-top.png">
        <img class="clapper-bottom" src="img/clapper-bottom.png">
    </div>
    <h3>ACTION!</h3>
</div>
 
<!-- load scripts after dom has been rendered -->
<script src="js/gsap/TweenLite.js"></script>
<script src="js/gsap/plugins/CSSPlugin.js"></script>
<script src="js/gsap/easing/EasePack.js"></script>
 
<script src="js/jquery/jquery-1.9.1.min.js"></script>
 
<script>
 
 var $clapperTop = $(".clapper-top");
 
 $action = $(".panel h3");
 
 TweenLite.to($clapperTop, 0.5, {rotation:-20, transformOrigin:"15px 15px", ease:Power4.easeIn});
 
 TweenLite.to($clapperTop, 0.1, {rotation:0, ease:Power4.easeIn, delay:1});
 
 TweenLite.from($action, 0.2, {opacity:0, scale:0, ease:Bounce.easeOut, delay:1.1});
 
 TweenLite.to($action, 0.5, {skewX:-45, left:750, ease:Back.easeIn, delay:1.5});
 // this didnt help
 TweenLite.render();
 
</script>
</body>
</html>
 
 
 
 
Any help will be greatly appreciated, thanks.
 
[edit : attachment removed by admin]
Link to comment
Share on other sites

Hi FunkyBudda,

 

Thanks for posting your issue.

We didn't want to overcomplicate the earlier exercises, but what you are seeing is the initial CSS being applied BEFORE the JavaScript loads and executes.

To remedy this we recommend that you use the CSS to hide all the elements that are being animated until the JS actually executes. Note this is usually only necessary with from() tweens.

 

So in your css do this

 

  .panel {
            position: relative;
            background: url(img/gradient-bg.jpg);
            width: 700px;
            height: 400px;
            margin:50px auto 0 auto;
            overflow: hidden;    
            /* set visibility to hidden */
            visibility:hidden;   
        }

and in the JS add

 TweenLite.set(".panel", {visibility:"visible"});

Here is the complete code:

 

<!DOCTYPE html>
<html>
<head>
    <title>2D Transforms</title>
    <style type="text/css">
        body {
            background-color:#041218;
            color: white;
        }


        .panel {
            position: relative;
            background: url(img/gradient-bg.jpg);
            width: 700px;
            height: 400px;
            margin:50px auto 0 auto;
            overflow: hidden;    
            /* set visibility to hidden */
            visibility:hidden;   
        }


        .clapper {
            position: absolute;
            width: 295px;
            height: 225px;
            left: 32px;
            top: 105px;
        }


        .clapper-top {
            position: absolute;
        }


        .clapper-bottom {
            position: absolute;
            top: 30px;
        }


        .panel h3 {
            position: absolute;
            left: 350px;
            top: 100px;
            font-size: 60px;
            font-family: Arial, Verdana, Helvetica, sans-serif;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="clapper">
        <img class="clapper-top" src="img/clapper-top.png">
        <img class="clapper-bottom" src="img/clapper-bottom.png">
    </div>
    <h3>ACTION!</h3>
</div>


<!-- load scripts after dom has been rendered -->
<script src="js/gsap/TweenLite.js"></script>
<script src="js/gsap/plugins/CSSPlugin.js"></script>
<script src="js/gsap/easing/EasePack.js"></script>


<script src="js/jquery/jquery-1.9.1.min.js"></script>


<script>


 var $clapperTop = $(".clapper-top");


 $action = $(".panel h3");




// use TweenLite to set the visibility to "visible"
 TweenLite.set(".panel", {visibility:"visible"})


 TweenLite.to($clapperTop, 0.5, {rotation:-20, transformOrigin:"15px 15px", ease:Power4.easeIn});


 TweenLite.to($clapperTop, 0.1, {rotation:0, ease:Power4.easeIn, delay:1});


 TweenLite.from($action, 0.2, {opacity:0, scale:0, ease:Bounce.easeOut, delay:1.1});


 TweenLite.to($action, 0.5, {skewX:-45, left:750, ease:Back.easeIn, delay:1.5});
 // this didnt help
 TweenLite.render();


</script>
</body>
</html>

Let us know if you have any more questions. 

 

  • Like 2
Link to comment
Share on other sites

Thank you for the quick reply,

 

your solution worked.

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