PepDevils · October 26, 2017 11:19
diff --git a/oc_animation_process.txt b/oc_animation_process.txt
 Colocar um gif animado num site open cart, por exemplo este:
  https://codepen.io/PointC/pen/MyrbVr
  
 1- colocar o script com a library necessaria para a animação:
  -Este é colocado no ficheiro header.tpl entre a tag <head></head>
      catalog/view/theme/custom_theme/template/common/header.tpl
           
  atenção: todos os scripts linkados têm de ser https:
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
    
    
 2- colocar o elemento html <div> com/img
    -Este é colocado no ficheiro header.tpl entre a tag <body></body>
      catalog/view/theme/custom_theme/template/common/header.tpl
      
      <div id="ball" ><img class="ball-gif" src="https:../ball.gif"></div>
      
 3- colocar o css do div id=ball
    -este é colocado no ficheiro stylesheet.css nas ultimas linhas do ficheiro(no final mesmo)
      catalog/view/theme/custom_theme/stylesheet/stylesheet.css
      
                #ball {
                  width:100px;
                  height:100px;
                  border-radius: 50%;
                  background-color: navy;
                  position: absolute;
                  top:400px;
                  left:50px;
                }
                
  4- inserir o codigo javascript que controla a bola
        -este deve ser colocado no footer.tpl junto a outros <scripts> entre as tags </footer> </body>
            catalog/view/theme/custom_theme/template/common/footer.tpl
            
                <script type='text/javascript'>
                    window.onload = function() {

                    var morcego = document.getElementById('ball');
                    var morcego1 = document.getElementById('ball1');
                    var morcego2 = document.getElementById('ball2');

                    function play() {
                      TweenLite.set(morcego, {y:-50}); //350
                      var tl = new TimelineLite({delay:0.5});
                      tl.to(morcego, 0.5, {y:0})
                        .to(morcego, 1.25, {y:350})
                        .to(morcego, 2.5, {x:"+=1450"}, "-=1.75")
                        .to(morcego, 2.5, {x:"-=1450"}, "+=1.75")
                        .to(morcego, 1.25, {y:0})
                        .to(morcego, 0.5, {y:0})
                        .to(morcego, 0.5, {y:-50})
                        .to(morcego, 0.5, {x:-300})
                        .to(morcego, 5.5, {x:300})
                        .call(play);
                    }

                    function play1() {
                      TweenLite.set(morcego1, {y:50}); //350
                      var tl = new TimelineLite({delay:0.5});
                      tl.to(morcego1, 2.5, {y:0})
                        .to(morcego1, 2.5, {y:350})
                        .to(morcego1, 2.5, {x:"-=1450"}, "-=1.75")
                        .to(morcego1, 2.5, {x:"+=1450"}, "+=1.75")
                        //.to(morcego1, 0.8, {y:0})
                        .to(morcego1, 2.5, {y:0, x:50})
                        .to(morcego1, 2.5, {y:50, x:0})
                        .to(morcego1, 2.5, {x:-300})
                        .to(morcego1, 2.5, {x:300})
                        .call(play1);
                    }

                    function play2() {
                      TweenLite.set(morcego2, {y:50}); //350
                      var tl = new TimelineLite({delay:0.0});
                      tl.to(morcego2, 4.0, {y:"+=50", x:"+=50"})
                        .to(morcego2, 4.0, {y:"-=50", x:"+=50",})
                        .to(morcego2, 4.0, {y:"-=50", x:"-=50",})
                        .to(morcego2, 4.0, {y:"+=50", x:"-=50",})
                        .call(play2);
                    }

                    play();
                    play1();
                    play2();
                  }
                  </script>
	Colocar um gif animado num site open cart, por exemplo este:
	https://codepen.io/PointC/pen/MyrbVr

	1- colocar o script com a library necessaria para a animação:
	-Este é colocado no ficheiro header.tpl entre a tag <head></head>
	catalog/view/theme/custom_theme/template/common/header.tpl

	atenção: todos os scripts linkados têm de ser https:
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>


	2- colocar o elemento html <div> com/img
	-Este é colocado no ficheiro header.tpl entre a tag <body></body>
	catalog/view/theme/custom_theme/template/common/header.tpl

	<div id="ball" ><img class="ball-gif" src="https:../ball.gif"></div>

	3- colocar o css do div id=ball
	-este é colocado no ficheiro stylesheet.css nas ultimas linhas do ficheiro(no final mesmo)
	catalog/view/theme/custom_theme/stylesheet/stylesheet.css

	#ball {
	width:100px;
	height:100px;
	border-radius: 50%;
	background-color: navy;
	position: absolute;
	top:400px;
	left:50px;
	}

	4- inserir o codigo javascript que controla a bola
	-este deve ser colocado no footer.tpl junto a outros <scripts> entre as tags </footer> </body>
	catalog/view/theme/custom_theme/template/common/footer.tpl

	<script type='text/javascript'>
	window.onload = function() {

	var morcego = document.getElementById('ball');
	var morcego1 = document.getElementById('ball1');
	var morcego2 = document.getElementById('ball2');

	function play() {
	TweenLite.set(morcego, {y:-50}); //350
	var tl = new TimelineLite({delay:0.5});
	tl.to(morcego, 0.5, {y:0})
	.to(morcego, 1.25, {y:350})
	.to(morcego, 2.5, {x:"+=1450"}, "-=1.75")
	.to(morcego, 2.5, {x:"-=1450"}, "+=1.75")
	.to(morcego, 1.25, {y:0})
	.to(morcego, 0.5, {y:0})
	.to(morcego, 0.5, {y:-50})
	.to(morcego, 0.5, {x:-300})
	.to(morcego, 5.5, {x:300})
	.call(play);
	}

	function play1() {
	TweenLite.set(morcego1, {y:50}); //350
	var tl = new TimelineLite({delay:0.5});
	tl.to(morcego1, 2.5, {y:0})
	.to(morcego1, 2.5, {y:350})
	.to(morcego1, 2.5, {x:"-=1450"}, "-=1.75")
	.to(morcego1, 2.5, {x:"+=1450"}, "+=1.75")
	//.to(morcego1, 0.8, {y:0})
	.to(morcego1, 2.5, {y:0, x:50})
	.to(morcego1, 2.5, {y:50, x:0})
	.to(morcego1, 2.5, {x:-300})
	.to(morcego1, 2.5, {x:300})
	.call(play1);
	}

	function play2() {
	TweenLite.set(morcego2, {y:50}); //350
	var tl = new TimelineLite({delay:0.0});
	tl.to(morcego2, 4.0, {y:"+=50", x:"+=50"})
	.to(morcego2, 4.0, {y:"-=50", x:"+=50",})
	.to(morcego2, 4.0, {y:"-=50", x:"-=50",})
	.to(morcego2, 4.0, {y:"+=50", x:"-=50",})
	.call(play2);
	}

	play();
	play1();
	play2();
	}
	</script>