CODEWITHSUNDEEP
javascriptjqueryhtmlcssgsap
Dan
Dan

Reputation: 7744

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

Upvotes: 0

Views: 45

Answers (1)

TheOnlyError
TheOnlyError

Reputation: 1451

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

Upvotes: 2

Related Questions