Dan Dan - 2 months ago 8x
CSS Question

Reversal of Timeline causes part of Timeline to go "missing" on next play

The following code creates a GSAP TimelineMax which works perfectly on the first play. However, after the timeline has reversed and you play it again the second half of the

goes "missing".

var tl = new TimelineMax();

tl = new TimelineMax();
tl.to($(this).children("span.short"), 0.5, {scale: 0})
.set($(this).children("span.short"), {css:{display: "none"}})
.set($(this).children("span.long"), {css:{display: "block"}})
.from($(this).children("span.long"), 0.5, {scale: 0});
},function() {

.box {
width: 200px;
background: black

span {
color: white

.short {
display: block

.long {
display: none

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<div class="box">
<span class="short">S</span>
<span class="long">Long</span>

Here is a JSFiddle if you would prefer to use one.

I would appreciate any help in fixing the timeline so that it works correctly.

Note: You need to hover on the box to see the animation


You are supposed to use the fromTo function. Otherwise the value of scale will not revert to 1.

Check it out here.

I changed this line

.from($(this).children("span.long"), 0.5, {scale: 0});


.fromTo($(this).children("span.long"), 0.5, {scale: 0}, {scale: 1});