Jump to content
Search Community

gunther-vongoetzensanchez

Members

  • Posts

    2

  • Joined

  • Last visited

gunther-vongoetzensanchez's Achievements

0

Reputation

  1. gunther-vongoetzensanchez
    Thank you very much Zach Saucier! Your solution looks great!
  2. gunther-vongoetzensanchez
    I'm trying to animate an intro page with an intro text and an arrow in the following sequence: The background image is moved back and forth twice. After that, the arrow should scale from 1 to 1.5 and be rescaled again to the original size The intro text should also be scaled to 1.5 and rescaled to its original size For some reason, the arrow and text are scaled to 1.5 from the very start, how can I preserve the size for the arrow and the text while the background image inimation is still running? Here is the code sofar: <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <meta charset="utf-8"> <style type="text/css"> .intro-text { display: block; font-size: 16px !important; text-transform: uppercase; font-weight: bold; position: fixed; top: 50%; right: 140px; z-index: 99; color: red; } .intro-arrow { display: block; font-size: 16px !important; text-transform: uppercase; font-weight: bold; position: fixed; top: 45%; right: 70px; z-index: 99; color: white; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js" crossorigin="anonymous"></script> <script> var tl = new TimelineMax(); tl .fromTo("body", 0.5, {x:-15}, {x:0}) .fromTo("body", 0.5, {x:-15}, {x:0}) .fromTo('.intro-arrow', 0.5, {scale: 1},{scale: 1.5}) .fromTo('.intro-arrow', 0.5, {scale: 1.5},{scale: 1}) .fromTo('.intro-text', 0.5, {scale: 1}, {scale: 1.5}) .fromTo('.intro-text', 0.5, {scale: 1.5}, {scale: 1}) </script> </head> <body> <div class="container" style="height:100vh; background-image: url('http://rheinmainsport.de/images/news/boxcamp.png')"> <div class="intro-text">Here some intro text</div> <div class="intro-arrow"> <span class="SVGInline"><!--?xml version="1.0" encoding="UTF-8"?--> <svg class="SVGInline-svg" width="59px" height="130px" viewBox="0 0 59 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 63.1 (92452) - https://sketch.com --> <title>Fill-1</title> <desc>Created with Sketch.</desc> <g id="Main-Story" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Arrow" transform="translate(-166.000000, 0.000000)" fill="#ff0000" fill-rule="nonzero"> <g id="icon/arrow/x-large/white" transform="translate(166.000000, 0.000000)"> <path d="M2.2131,130.025 L0.0001,128 L54.7241,68.21 C56.3381,66.446 56.3381,63.578 54.7241,61.815 L0.0001,2.025 L2.2131,0 L56.9371,59.789 C59.5731,62.669 59.5731,67.355 56.9371,70.235 L2.2131,130.025 Z" id="Fill-1"></path> </g> </g> </g> </svg> </span> </div> </div> </body> </html>
×
×
  • Create New...