Chained transition based on the amazing codepen by Blake Bowen.
Last active
April 1, 2018 11:05
-
-
Save EE2dev/73567318b8c1c9863d0c4d031b2723dd to your computer and use it in GitHub Desktop.
Chained transition - text with <span>
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let containerDiv = "div.chart"; | |
let pathDurations = []; | |
let app; // the main class in stars.js to create the particles | |
const explosionStrength = 0.002; | |
const transitionSpeed = 7; | |
const starOptions = { | |
mouseListener: false, | |
texture: document.querySelector("#star-texture-white"), | |
frames: createFrames(5, 80, 80), | |
maxParticles: 2000, | |
backgroundColor: "#111111", | |
blendMode: "lighter", | |
filterBlur: 50, | |
filterContrast: 300, | |
useBlurFilter: true, | |
useContrastFilter: true | |
} | |
function displayText(_textArray) { | |
let sel = d3.select(containerDiv); | |
// add headers for all strings but the last one | |
for (let i = 0; i < _textArray.length - 1; i++) { | |
sel.append("div") | |
.attr("class", "header h" + i) | |
.append("h1") | |
.attr("class", "trans") | |
.text(_textArray[i]); | |
} | |
// add last string by wrapping each letter around a span | |
// which can be styled individually | |
let sel2 = sel.append("div") | |
.attr("class", "header h" + (_textArray.length - 1)) | |
.append("h1") | |
.attr("class", "trans"); | |
const lastString = _textArray[_textArray.length-1]; | |
for (let i = 0; i < lastString.length; i++) { | |
sel2.append("span") | |
.attr("class", "color-" + (i % 5)) | |
.text(lastString[i]); | |
} | |
} | |
function createPaths() { | |
let bBox = d3.select(containerDiv).node().getBoundingClientRect(); | |
let sel = d3.select(containerDiv) | |
.append("div") | |
.attr("class", "paths") | |
.append("svg") | |
.attr("width", bBox.width) | |
.attr("height", bBox.height); | |
const container = d3.select(containerDiv).node().getBoundingClientRect(); | |
d3.selectAll(containerDiv + " h1") | |
.each(function(d,i) { | |
let bBox = d3.select(this).node().getBoundingClientRect(); | |
let xTranslate = d3.select("div.chart").node().getBoundingClientRect().x; | |
let pos = {}; | |
pos.width = bBox.width; | |
pos.xStart = xTranslate + (container.width - bBox.width) / 2 - container.x; | |
pos.yStart = bBox.y + (bBox.height / 2) - container.y; | |
let p = sel.append("path") | |
.attr("class", "header hidden trans " + "h" + i) | |
.attr("d", (d) => { | |
let str = "M" + pos.xStart + ", " + pos.yStart | |
+ " L" + (pos.width + pos.xStart) + ", " + pos.yStart; | |
return str; | |
}); | |
let duration = p.node().getTotalLength() * transitionSpeed; | |
pathDurations.push(duration); | |
}); | |
} | |
function intializeStars() { | |
let bBox = d3.select(containerDiv).node().getBoundingClientRect(); | |
d3.select(containerDiv).insert("div", ".h0") | |
.attr("class", "stars") | |
.append("canvas") | |
.attr("id", "view") | |
.attr("width", bBox.width) | |
.attr("height", bBox.height); | |
starOptions.view = document.querySelector("#view"); | |
app = new App(starOptions); | |
window.addEventListener("load", app.start()); | |
window.focus(); | |
} | |
function starsAlongPath(path) { | |
let l = path.getTotalLength(); | |
return function(d, i, a) { | |
return function(t) { | |
let p = path.getPointAtLength(t * l); | |
app.spawn(p.x , p.y); | |
return "translate(0,0)"; | |
}; | |
}; | |
} | |
function animateStars() { | |
let durations = pathDurations.concat(pathDurations); | |
let chainedSel = d3.selectAll(".trans").data(durations); | |
chainedTransition(chainedSel); | |
function chainedTransition(_chainedSel, _index = 0) { | |
const num_headers = _chainedSel.size() / 2; | |
let nextSel = _chainedSel.filter((d,i) => (i % num_headers) === _index); | |
transitionNext(nextSel); | |
function transitionNext(_selection){ | |
console.log(_index); | |
if (_index === num_headers - 1) { | |
setTimeout( function() { | |
app.setActivate(false); // disable requestAnimationFrame calls | |
transitionLast(_selection); | |
}, 1000); | |
} | |
else { | |
// the header | |
_selection.filter((d,i) => i === 0) | |
.transition() | |
.duration(d => d) | |
.delay(1000) | |
.ease(d3.easeLinear) | |
.style("opacity", 1) | |
// the path | |
let sel = _selection.filter((d,i) => i === 1); | |
sel.transition() | |
.duration(d => d) | |
.delay(1000) | |
.ease(d3.easeLinear) | |
.attrTween("transform", starsAlongPath(sel.node())) | |
.on ("end", function() { | |
_index = _index + 1; | |
if (num_headers > _index) { | |
nextSel = _chainedSel.filter((d,i) => (i % num_headers) === _index); | |
transitionNext(nextSel); | |
} | |
}); | |
} | |
} | |
function transitionLast(_selection){ | |
starOptions.texture = document.querySelector("#star-texture"); | |
let app2 = new App(starOptions); | |
window.addEventListener("load", app2.start()); | |
window.focus(); | |
// the header | |
_selection.filter((d,i) => i === 0) | |
.transition() | |
.duration(0) | |
.style("opacity", 1) | |
// the path | |
let path = _selection.filter((d,i) => i === 1).node(); | |
let l = path.getTotalLength(); | |
for (let t = 0; t < 1; t = t + explosionStrength) { | |
let p = path.getPointAtLength(t * l); | |
app2.spawn(p.x , p.y); | |
} | |
setTimeout( function() { | |
app2.setActivate(false); // disable requestAnimationFrame calls | |
}, 3000); | |
} | |
} | |
} | |
let myText = ["My favorite programming language is", "javascript with d3.js"]; | |
displayText(myText); | |
createPaths(); | |
intializeStars(); | |
animateStars(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<title>stars</title> | |
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> | |
<link href="style.css" rel="stylesheet"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<div class="chart"></div> | |
<aside style="display:none"> | |
<img id="star-texture" src="stars-02.png"> | |
<img id="star-texture-white" src="stars-02w.png"> | |
</aside> | |
<script src="stars.js"></script> | |
<script src="animateStars.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |