Jump to content
Search Community

Animation not working as expected

gunther-vongoetzensanchez test

By gunther-vongoetzensanchez
in GSAP

Moderator Tag
 Share

Recommended Posts

gunther-vongoetzensanchez test

gunther-vongoetzensanchez

Posted
Posted

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>

See the Pen oNXzqgX by gunther-von-goetzen-sanchez (@gunther-von-goetzen-sanchez) on CodePen

Link to comment
Share on other sites
ZachSaucier test

ZachSaucier

Posted
Posted

Hey Gunther and welcome to the GreenSock forums! I actually just answered your post on StackOverflow.

 

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...