Анимация GreenSock не работает должным образом - PullRequest
Новая
       46

Анимация GreenSock не работает должным образом

0 голосов
/ 20 февраля 2020

Я пытаюсь анимировать вступительную страницу с вводным текстом и стрелкой в ​​следующей последовательности:

Фоновое изображение перемещается вперед и назад дважды. После этого стрелка должна масштабироваться от 1 до 1,5 и снова масштабироваться до исходного размера

Вводный текст также должен быть масштабирован до 1,5 и масштабироваться до его исходного размера

По некоторым причинам, стрелка и текст с самого начала масштабируются до 1,5, как я могу сохранить размер стрелки и текста, пока анимация фонового изображения все еще выполняется?

Вот код софта: 

<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>

На CodePen

https://codepen.io/gunther-von-goetzen-sanchez/pen/oNXzqgX

1 Ответ

2 голосов
/ 20 февраля 2020

Это потому, что вы анимируете, используя .fromTo(). .from() и .fromTo() s по умолчанию имеют immediateRender, установленное на true (потому что обычно это то, что люди хотят). Вы можете установить immediateRender в false для подростков, вызывающих проблему масштабирования.

В качестве альтернативы просто используйте вместо этого вызовы .to (). Использование repeat и yoyo также может упростить вашу работу. Как бы я записал его в формате GSAP 3: 

var tl = gsap.timeline();
tl
  .fromTo("body", {x: -15}, {x: 0, repeat: 1})
  .to('.intro-arrow', {scale: 1.5, repeat: 1, yoyo: true})
  .to('.intro-text', {scale: 1.5, repeat: 1, yoyo: true})

Длительность можно не указывать, поскольку в GSAP 3 по умолчанию используется значение 0,5. Если вы хотите изменить продолжительность анимации, мы рекомендуем вам поместите его в параметр vars, например duration: 1.

Мы настоятельно рекомендуем статью Getting Started , так как вы можете узнать много вещей, подобных этому :)

Мы также настоятельно рекомендуем форумы GreenSock , потому что вы сможете быстро и качественно получить помощь от экспертов по GSAP и веб-анимации.

...