Is it possible for GSAP to do what I think.
Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause.
Here's the code sample:
HTML
<div class="book">
<div class="last page"></div>
<div class="page one"></div>
...
<div class="cover page"></div>
</div>
<div id="prevPage"></div>
<div id="nextPage"></div>
JAVASCRIPT
var book_timeline = new TimelineMax({ paused: true })
/* tween children */
.to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })
.to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })
.to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' })
.to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' });
$('#nextPage').click(function(){
// code that animates only one (next page) tween inside a timeline then pause
book_timeline.play();
});
$('#prevPage').click(function(){
book_timeline.reverse();
});
I want to use GSAP to make my own book flipping div's