CODEWITHSUNDEEP
javascriptcssanimationgsap
Gunther von Goetzen Sanchez
Gunther von Goetzen Sanchez

Reputation: 156

GreenSock animation not working as expected

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>

On CodePen

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

Upvotes: 0

Views: 376

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25954

This is because you're animating using .fromTo(). .from() and .fromTo()s by default have immediateRender set to true (because generally that's what people want). You can set immediateRender to false for the tweens that are causing the scaling issue.

Alternatively, just use .to() calls instead. Using repeat and yoyo could also make your job easier. How I'd write it in GSAP 3 format:

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

The duration can be left out since 0.5 is the default in GSAP 3. If you want to change the duration for a tween, we recommend that you put it inside of the vars parameter, like duration: 1.

We highly recommend the Getting Started article as you can learn a lot of things similar to this :)

We also highly recommend the GreenSock forums because you'll be able to get quick, high quality help from experts in GSAP and web animation.

Upvotes: 2

Related Questions