Dan Dan - 3 months ago 11
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

TimelineMax
goes "missing".



var tl = new TimelineMax();

$(".box").hover(function(){
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() {
tl.reverse();
});

.box {
width: 200px;
height:100px;
text-align:center;
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>
</div>





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

Answer

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

To

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