Building a slider

Hi Max, Suppose I want to create an action much like what Hype has now "go to next or previous scene" but there's no option for timelines, Is there a script to support this next and or previous scene?

Do you mean the built in ... ? Not sure what you mean.

1 Like

Not Scene, NextTimeline you might be wondering why not go the scene route well I want to use timelines.

Screen Shot 2022-05-05 at 3.54.16 PM

Either use an index to increment and trigger the next timeline, or just use Hype Data Magic … it's easy to use for slider.

Thank you, what would this entail? In other words, example would be ideal.

Not sure this make sense.

You want code to say go to next timeline. The timelines are not listed like scenes.
Like in the real world they are a conceptional constructs of what we describe as now and then.
The then can be before or after and direction is only from the stand point of now.

the now being a keyframe and the then being a timeline.

Confused yet.. seemed to make sense to me as I wrote that. :sunglasses: ( maybe @MaxZieb can get the I.A to explain them better.( Being serious ))

Any way you can't do this in the way you are thinking.
What you can do and since you are using code anyway is those the e Start Time line Name...


Was Typing the above when @MaxZieb split the topic.

I wouldn't do it that way. So, not really suitable for an example.

You would need to use something like an array with the timeline names and then iterate through them as needed.

The index would be a global var that holds the current indices of the array.
Each time you go to the next time line in the array your would update the index by 1.

var timelines =["t1","t2","t3"]

They is so much on the forum explaining this sort of thing already..

Maybe this works. Untested. As Mark suggested you would need to put the timelines in an array like hypeDocument.customData.timelineNames

Hence, hypeDocument.customData.timelineNames=['Slide1', 'Slide2', ...]


function showNextTimeline(hypeDocument, element, event) {
    var currentTimelineIndex = hypeDocument.customData.currentTimelineIndex
    var timelineNames = hypeDocument.customData.timelineNames
    var currentTimelineName = timelineNames[currentTimelineIndex]
    var nextTimelineName = timelineNames[currentTimelineIndex + 1]
    var nextTimelineIndex = currentTimelineIndex + 1
    if (nextTimelineName) {
        hypeDocument.continueTimelineNamed(nextTimelineName, hypeDocument.kDirectionForward, true)
        hypeDocument.customData.currentTimelineIndex = nextTimelineIndex
    }   
}

function showPreviousTimeline(hypeDocument, element, event) {
    var currentTimelineIndex = hypeDocument.customData.currentTimelineIndex
    var timelineNames = hypeDocument.customData.timelineNames
    var currentTimelineName = timelineNames[currentTimelineIndex]
    var previousTimelineName = timelineNames[currentTimelineIndex - 1]
    var previousTimelineIndex = currentTimelineIndex - 1
    if (previousTimelineName) {
        hypeDocument.continueTimelineNamed(previousTimelineName, hypeDocument.kDirectionReverse, true)
        hypeDocument.customData.currentTimelineIndex = previousTimelineIndex
    }  
}

Here is another version using pop and unshift etc and doesn't need an index but still the array of timelines. untested and ment as regular Hype Function so no need to copy the signature!:


function showNextTimeline(hypeDocument, element, event) {
    var timelineNames = hypeDocument.customData.timelineNames;
    var timelineName = timelineNames.shift();
    timelineNames.push(timelineName);
    hypeDocument.startTimelineNamed(timelineName, hypeDocument.kDirectionForward);
}

function showPreviousTimeline(hypeDocument, element, event) {
    var timelineNames = hypeDocument.customData.timelineNames;
    var timelineName = timelineNames.pop();
    timelineNames.unshift(timelineName);
    hypeDocument.startTimelineNamed(timelineName, hypeDocument.kDirectionForward);
}

Tried above and below neither work

function Next(hypeDocument, element, event) {
var currentTimelineIndex = hypeDocument.customData.currentTimelineIndex
var timelineNames = hypeDocument.customData.timelineNames=['Slide1', 'Slide2', 'Slide3', 'Slide4', 'Slide5', 'Slide6', 'Slide7', 'Slide8']
var currentTimelineName = timelineNames[currentTimelineIndex]
var nextTimelineName = timelineNames[currentTimelineIndex + 1]
var nextTimelineIndex = currentTimelineIndex + 1
if (nextTimelineName) {
hypeDocument.continueTimelineNamed(nextTimelineName, hypeDocument.kDirectionForward, true)
hypeDocument.customData.currentTimelineIndex = nextTimelineIndex
}
}

you should post a hypeexamplefile ... may help