I need to create some custom scroll animations - and wanted to start exploring animating a simple block.
Using json - I want to provide the skeleton for the block (classname, height, width, background), then the actions per start/end frames which relates to the scroll value.
how do I modify the code -- to handle the forward/backward animations for the block using the data json
So in this example.
-- when the scroll is at 0 -- or start of application - create the block.
-- if the scroll is between a range 100-400 - the scroll is instructed to move right.
-- if the scroll hits over 400 - destroy the block.
so the animation is to take hold in a forward direction, but I want to reverse the animations in the opposite direction - so the timeline can be moved forward, backward - dependent on the speed of the scroll - so a slowmo or speedup affect can take hold
This is the first step - for adding more complicated animations, longer intricate ones, with multiple objects.
I have tried to capture the translate details so the untouched x or y translation in place doesn't get overridden - but I think there is a bug....
please review Get translate3d values of a div?
//jsfiddle
https://jsfiddle.net/g10qe5m6/6/
var data = [{
"structure": {
"name": "square",
"height": 30,
"width": 30,
"x": 10,
"y": 10,
"background": 'url("https://i.pinimg.com/originals/74/f3/5d/74f35d5885e8eb858e6af6b5a7844379.jpg")'
},
"frames": [{
"create": [{
"s": 0
}, {
"e": 0
}]
}, {
"moveRight": [{
"s": 1
}, {
"e": 400
}]
}, {
"destroy": [{
"s": 400
}, {
"e": 400
}]
}]
}]
//console.log(data)
function getCurrentValues(el) {
var results = $(el).css('transform').match(/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)
if(!results) return [0, 0, 0];
if(results[1] == '3d') return results.slice(2,5);
results.push(0);
return results.slice(5, 8);
};
var animations = {
createObj: function(obj) {
//create object
var block = $('<div></div>');
$(block).addClass(obj.name);
$(block).addClass("animatedblock");
$(block).css("height", obj.height);
$(block).css("width", obj.width);
$(block).css("transform", 'translate(' + obj.x + 'px, ' + obj.y + 'px)');
$(block).css("background", obj.background);
$(block).css("background-size", "cover");
$('.container').append($(block));
},
deleteObj: function(el) {
//destroy object
el.remove()
},
moveRight: function(el, pixels) {
//el.css('')
//move right
console.log("x", getCurrentValues(el)[0])
console.log("y", getCurrentValues(el)[1])
el.css('transform', 'translate(' + pixels + 'px, ' + getCurrentValues(el)[1] + 'px');
//el.css('transform', 'translate(' + pixels + 'px, ' + getCurrentValues(el).y + 'px');
},
moveLeft: function(el, pixels) {
//move left
//el.css('transform', 'translate(' + -pixels + 'px, ' + getCurrentValues(el).y + 'px');
console.log("x", getCurrentValues(el)[0])
console.log("y", getCurrentValues(el)[1])
el.css('transform', 'translate(' + -pixels + 'px, ' + getCurrentValues(el)[1] + 'px');
},
moveDown: function(el, pixels) {
//move down
//el.css('transform', 'translate(' + getValues(el).x + 'px, ' + pixels + 'px)');
el.css('transform', 'translate(' + getCurrentValues(el)[0] + 'px, ' + pixels + 'px');
},
moveUp: function(el, pixels) {
//move up
// el.css('transform', 'translate(' + getValues(el).x + 'px, ' + -pixels + 'px)');
el.css('transform', 'translate(' + getCurrentValues(el)[0] + 'px, ' + -pixels + 'px');
}
}
//app.deleteObj($('.square'));
//data.skeleton
/*
var instructor = {
action: function(data, position) {
console.log("position", position)
$.each(data, function(i, item) {
//alert(item.PageName);
console.log("item", item.frames)
});
}
}
*/
var frames = data[0].frames;
var instructor = {
action: function(scroll, direction) {
var sequence = [{
"create": 0,
"moveRight": 100,
"moveDown": 200,
"destroy": 400
}]
//if down - forward animation
//if up - reverse animation
///use the data to detect what the block can do at what start and end frame
if (scroll == 0) {
//create block
//animations.createObj(data[0].structure);
}
if (scroll > 100 && scroll < 400) {
//move right
animations.moveRight($('.square'), scroll);
}
if (scroll > 400 && scroll < 800) {
//move right
animations.moveDown($('.square'), scroll);
}
if (scroll > 800) {
//animations.deleteObj($('.square'));
}
//move left
//animations.moveLeft($('.square'), scroll);
}
}
animations.createObj(data[0].structure);
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log("scroll", scroll);
if (scroll > position) {
console.log('scrollDown');
instructor.action(scroll, "down");
} else {
console.log('scrollUp');
instructor.action(scroll, "up");
}
position = scroll;
});
