chrstn chrstn - 9 days ago 4
CSS Question

Animate canvas shape points based on scroll position

I am drawing an abstract shape as a background in the element. Then I am changing the shape/color of that shape based on what section of the site is in view.

I would like the shape to "morph" between its different states and not just redraw. Ideally, it would move the point from its current position towards its "goal" position with every increment of scroll, but that math is making by brain explode. Another option is to just have the scroll kick off an animation when the section comes into view, but I can't even figure out how to have canvas animate the points to their new position and not just redraw the entire thing.

I associate each sections' coordinates/color information by using the JQuery data.

I currently have (very) rudimentary scroll detection that knows when a section scrolls into view, grabs the data out and calls a function to re-draws the canvas shape.

function getVisibleSectionData() {
$('.section').each(function () {
var offset = 100,
height = $(this).height(),
bounds = $(this)[0].getBoundingClientRect();
if(bounds.top<=100 && bounds.top>-(height-offset)){
drawShape($(this).data("shape"));
}
})
}


See the rest of the code on the working JSFiddle:
https://jsfiddle.net/oqrftfbq/1/

Answer

Challenge accepted!

Here it is jsfiddle.net/oqrftfbq/2/

(Sorry for link. I get weird issue on stackoverflow about jsfiddle when I try to post)