Jump to content
Search Community

irvy

Members

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by irvy

    How can i add a border with a tween

    in Banner Animation

    Posted

    I tried to add a border to a banner Ive made, but none of the tries worked

    i tried

    .to(type1, .3,{backgroundColor: "#000000", border:"40px #00a1d6 solid"})

    I tried with an inset and i get the same effect but I dont want it to be transparent.

    .to(type1, .3,{backgroundColor: "#000000", box:"inset 0 0 0 7px #00a1d6 solid"}) 

    I like how it looks with the inset but I the only thing about it is the shadow effect and how things can be seen under the inset once the logo passes by. 

     

    Here is my codepen 

    See the Pen KWGNJo?editors=1010 by IrvingG (@IrvingG) on CodePen

    • Like 1

    How to properly arrange script for greensock in html

    in GSAP

    Posted

    I am having issues with my Atom editor and my code. I am used to codepen, but I decided to stray away from it and use an editor right on my laptop. I am trying to use GreenSock and I honestly cannot get anything to work. I'm new at it and I understand how to do certain things while I looked up the documentation, but I cant get anything to work. I am very confused as to the arrangement of scripts if I am even doing it correctly. I made a mockup tryout from a tutorial here, but I cant get a simple animation working even if the code if practically from here.

     

    any help will be appreciated.

     
     
    <!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="pathTo/stylesheet.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="pathTo/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
</head>

<body>
    <div id="box" class="box green"></div>
</body>

</html> 
    .box {
  width:50px;
  height:50px;
  position:relative;
  border-radius:6px;
  margin-top:4px;
  display:inline-block
}

.green{
  background-color:#6fb936;
}


    var obj = document.getElementById('box');
TweenMax.to(obj, 1.5, {width:100});

     

×
×
  • Create New...