Getting the in and out timestamp of slides

[thrasherstudios77]

Hello

 

I have a master timeline that contains, 1 timeline per slide, each slide contains multiple tweens and 'labels' for animation in and out. This animation sequence runs over the course of a slideshow, where a user can hit next, prev, pause, play and let the slideshow play through uninterrupted.

 

The master timeline is built on the 'slider-init' event, so before the slideshow animates in the first slide, all the timelines and tweens have been created. Now on the slideshow 'slide-change' event I need to seek(), either to a time value or to a label that corresponds to the current slide's 'in' point relative to the 'Master' timelines total duration.

 

When I added labels to my slide timelines I thought that the Master would have access to them but it keeps returning '-1'. I would appreciate some suggestions, or better way to approach this.

 

thanks, 

 

Here is some code to help see my setup

 

var master = new TimelineLite(),
    duration = 2,
    d_offset = 0.25;

master.pause();

$('.ls-slide').each( function(i) {

    var $this = $(this),
        slide_dur = parseInt( $(this).data('ls').match( /slidedelay *: *(.*?);/ )[1]),
        time_to_outro = (slide_dur - (duration * 2000) ) / 1000;

    master.add( addSlide( $this, (i + 1), duration, d_offset, time_to_outro ) );

});

function addSlide( slide, i, duration, d_offset, time_to_outro ){

    var t1 = new TimelineLite(),
        el1 = $('<div class="panel" style="width:500px; height:212px; background:green;"><h1 style="position:absolute;">This is Slide '+i+'</h1></div>'),
        el2 = $('<div class="panel" style="width:500px; height:212px; background:red;"><h1 style="position:absolute;">This is Slide '+i+'</h1></div>'),
        hover_repeats = Math.floor(time_to_outro / 2.6) - 1;

    slide.append(el1);
    slide.append(el2);
    TweenLite.set(el1, {x: 500} );

    // Intro
    t1.from(el1, duration, {x:-500, opacity:0, ease:'Quint.easeInOut' }, "slide"+i+"-in" ) 
        .from(el2, duration, {x:-500, opacity:0, ease:'Quint.easeInOut' }, "slide"+i+"-in+=0.25" )

    // Hovering
    .to( el1.find('h1'), 2.6, {top:+"20", repeat:hover_repeats, yoyo:true, delay:-"0.7" }, "hover" )
    .to( el2.find('h1'), 2.6, {top:+"20", repeat:hover_repeats, yoyo:true, delay:-"0.7" }, "hover+=0.25" )

    // Outro
    .to(el1, duration, { x:1200, ease:'Quint.easeInOut' }, "slide"+i+"-out" )
    .to(el2, duration, { x:1200, ease:'Quint.easeInOut' }, "slide"+i+"-out+=0.25" );

    return t1;
};

$('body').on('slide-change ', function(event, data){

    if ( data.nextLayerIndex === null || data.nextLayerIndex === 1 ) {
        var label = master.getLabelTime("slide1-in");
        master.seek(label);
    }
    else {
        var label = master.getLabelTime("slide"+data.nextLayerIndex+"-in");
        master.seek(label);
    }
});

[Carl]

its extremely difficult to accurately troubleshoot a code snippet, but I think the following may work:

 

$('.ls-slide').each( function(i) {
    var $this = $(this),
        slide_dur = parseInt( $(this).data('ls').match( /slidedelay *: *(.*?);/ )[1]),
        time_to_outro = (slide_dur - (duration * 2000) ) / 1000;
  

// note the position parameter uses "slide" + i
    master.add( addSlide( $this, (i + 1), duration, d_offset, time_to_outro ) "slide" + i);
});


//you can then jump to any slide via master with
master.seek("slide2");
master.play("slide3"); //etc

If you still need help please provide a reduced test case using CodePen: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ We don't need to see the full production code or anything dynamic. Just something simple that replicates the issue.