Skip to content

Instantly share code, notes, and snippets.

@majido
Last active Apr 19, 2017
Embed
What would you like to do?
Some ideas!
animationWorklet.import('twitter-header-animator.js').then( _ => {
var anim = new WorkletAnimation('twitter-header',
[document.timeline, new ScrollingTimeline(scrollingElement, {/* options for timeline */})],
{
targets : {
bar: element1,
avatar: [element2, element3],
},
timing: {
duration: ....???
}
});
}
//In animation worklet
registerAnimator('twitter-header', class {
const easing = new EaseOutTiming();
animate(timelines, targets) {
const time = timelines[0].currentTime; // [0...timeRange]
const progress = time / range;
targets.get("bar")[0].outputStuleMap.set("opacity", easing.value(progress))
targets.get("avatar").forEach(avatar => {
avator.outputStuleMap.set("opacity", progress);
})
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment