Skip to main
Frame number 1
// (onActive) Scale by frame visiblity
objectsCache.frame2.css({
transform: `scale(${coords.percent.screenPlayed / 10 + 0.8})`
});
Frame number 2
// (onActive) Rotate by uncentered percent
objectsCache.frame1.css({
transform: `rotate(${coords.percent.frameUnCentered}deg)
scale(0.8)`
});
Frame number 3
// (onActive) Translate by uncentered percent
$(this).css({
transform: `translate(${coords.percent.frameUnCentered / 2}%, 0)`
});
Frame number 4
onEnter: function() {
objectsCache.frame3.addClass('active');
},
onLeave: function() {
objectsCache.frame3.removeClass('active');
}
Frame number 5
// (onActive) Invert by uncentered percent
$(this).css({
filter: `invert(${(1 - coords.percent.frameUnCentered / 50) / 2}
sepia(${(1 - coords.percent.frameUnCentered / 50) / 2}`
});