Jump to content
Search Community

sujith

Members

  • Posts

    2

  • Joined

  • Last visited

sujith's Achievements

1

Reputation

  1. sujith
    Hey @Carl thanks a lot, it worked!!!.
  2. sujith
    sujith changed their profile photo
  3. sujith
    Someone help me with this. I am trying GSAP for the first time and its not working. I used GSAP cdn , but its not working. But when i copy the same code and add GSAP cdn in codepen, it is working there. pls help!!!! HTML : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans|Nova+Mono|Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="script.js"></script> </head> <body> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Content</a></li> </ul> <div id="icon"> <i class="fa fa-bars"></i> </div> </nav> <div class="container"> <div class="final__layers"> <img src="phone.svg" alt="back layer" class="phone"> <img src="content.svg" alt="mid layer" class="content"> <img src="image.svg" alt="top layer" class="image"> </div> <div class="cont" id="ckkk"> <h2>Heading</h2> <p>para</p> </div> </div> </body> </html> *{ padding: 0; margin: 0; text-decoration: none; list-style: none; } body{ font-family: sans-serif; } nav{ background-color: black; position: sticky; top: 0; height: 50px; max-width: 100%; } nav ul{ float: left; margin-left: 40px; text-align: center; } nav li{ display: inline-block; margin: 0 8px; line-height: 50px; } nav a{ color: white; font-size: 15px; text-transform: uppercase; border: 1px solid transparent; padding: 5px 10px; border-radius: 3px; } a.active, a:hover{ border: 1px solid white; transition: .5s; } nav #icon{ color: white; font-size: 30px; float: left; margin-left: 40px; line-height: 50px; cursor: pointer; display: none; } .container{ text-align: center; position: relative; } .final__layers { position: absolute; padding: 70px; min-height: 200px; max-width: 100px; text-align: center; grid-area: svg; } .final__layers img { position: absolute; max-width: 100%; height: 100%; transform-style: preserve-3d; z-index: -1; } .final__layers img.content{ padding-left: 70px; padding-top: 60px; height: 250px; } .final__layers img.image{ padding-left: 20px; padding-top: 60px; height: 250px; } .final__layers img.phone { transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px); animation: anim 5s infinite ease-out; } .final__layers img.image,img.content { transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(160px); animation: animm 5s infinite ease-out; } /*.final__layers img.content { transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px); animation: animmm 5s infinite ease-out; } */ @keyframes anim{ 0%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px); } 50%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(100px); } 100%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(120px); } } @keyframes animm{ 0%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(130px); } 50%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(140px); } 100%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(130px); } } @keyframes animmm{ 0%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px); } 50%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(200px); } 100%{ transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-25deg) translateX(35px) translateY(0px) translateZ(180px); } } .cont{ position: absolute; grid-area: text; right: 150px; top: 50px; } @media screen and (max-width: 909px) { nav #icon{ display: block; } nav ul{ position: fixed; width: 100%; height: 100%; background-color: black; opacity: 0.8; text-align: center; margin-left: 0; top:-100%; z-index: 2; } nav li{ display: block; line-height: 50px; } a.active, a:hover{ border: none; color: #3399ff; } nav ul.show{ top: 50px; transition: .2s; } .cont{ position: absolute; grid-area: text; right: 10px; top: 50px; } } JS: // "to" tween (animate to provided values) gsap.to(".cont", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds }); $(document).ready(function(){ $('#icon').click(function(){ $('ul').toggleClass('show'); }); }); When i inspect in the google chrome, it consoles this.
×
×
  • Create New...