RAM Logo

animated RAM logo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
<div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<svg id="ramLogo" class="ram-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 396.57 109.32"><defs><style>#ramLogo{width: 100%; height:...

CSS

.ram-svg{ /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* only required for <img /> */
}

JavaScript

//var alwaysRotateTl = new TimelineMax({ repeat: -1,	paused: true}).fromTo('#gear1',	2,	{ rotation: 0 },	{ rotation: -360, ease: Linear.easeNone }	);
var gearl = new TimelineMax({ repeat: -1, paused: false }).to("#gear1", 4, {rotation:-360, transformOrigin:"50% 50%", ease: Linear.easeNone});
var gear2 = new TimelineMax({ repeat: -1, paused: false }).to("#gear2", 4, {rotation:360, transformOrigin:"50% 50%", ease: Linear.easeNone});
//$('#ramLogo').css({"width":"100%", "height": "100%"});
//TweenLite.to("#gear1", 1, {rotation:-360, transformOrigin:"50% 50%", repeat: -1});
        
  /*<animateTransform attributeName="transform" type="rotate" values="0 0 0; 360 0 0" additive="sum" dur="6s" repeatCount="indefinite" /> */