Dan Dan - 1 year ago 73
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

Answer Source

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});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download