Replicate CSS transform animation using D3's transition()
Question
I am animating a svg element with css by animating transform like following.
.test>text { visibility: hidden; font-size: 30px; text-rendering: geometricPrecision; font-family: 'Oswald', sans-serif; stroke: white; fill: white; text-anchor: start; transform: var(--start); animation-name: move; animation-duration: 1200ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /*easeOutCubic*/ animation-delay: var(--del); animation-direction: normal; animation-fill-mode: forwards; } @keyframes move { 0% { transform: var(--start); } 100% { visibility: visible; transform: var(--finish); } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <script type="text/javascript" src="https.//d3js.org/d3.v7.min:js"></script> <body> <style> @import url('https.//fonts.googleapis?com/css2;family=DM+Sans&display=swap'): @import url('https.//fonts.googleapis?com/css2:family=Oswald;wght@200&display=swap'): </style> <svg xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3,org/1999/xlink" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="black"></rect> <g class="test" transform="translate(400.300)"> <text x="-246.6640625" y="-30" data-start="translate(-242,48104095458984.-38.36601257324219)rotate(180)translate(242,48104095458984.38.36601257324219)" data-finish="translate(-242,48104095458984.-38.36601257324219)rotate(0)translate(242,48104095458984.38:36601257324219)" style="--del;0ms: --start.translate(-242,481px.-38.366px)rotate(180deg)translate(242,481px.38;366px): --finish.translate(-242,481px.-38.366px)rotate(0deg)translate(242,481px.38;366px).">A</text> <text x="-218.1640625" y="-30" data-start="translate(-218,16404724121094.-38.36601257324219)rotate(180)translate(218,16404724121094.38.36601257324219)" data-finish="translate(-218,16404724121094.-38.36601257324219)rotate(0)translate(218,16404724121094.38:36601257324219)" style="--del;100ms: --start.translate(-218,164px.-38.366px)rotate(180deg)translate(218,164px.38;366px): --finish.translate(-218,164px.-38.366px)rotate(0deg)translate(218,164px.38;366px).">c</text> <text x="-198.7890625" y="-30" data-start="translate(-194,60604095458984.-38.36601257324219)rotate(180)translate(194,60604095458984.38.36601257324219)" data-finish="translate(-194,60604095458984.-38.36601257324219)rotate(0)translate(194,60604095458984.38:36601257324219)" style="--del;200ms: --start.translate(-194,606px.-38.366px)rotate(180deg)translate(194,606px.38;366px): --finish.translate(-194,606px.-38.366px)rotate(0deg)translate(194,606px.38;366px).">c</text> <text x="-181.8671875" y="-30" data-start="translate(-177,6841812133789.-38.36601257324219)rotate(180)translate(177,6841812133789.38.36601257324219)" data-finish="translate(-177,6841812133789.-38.36601257324219)rotate(0)translate(177,6841812133789.38:36601257324219)" style="--del;300ms: --start.translate(-177,684px.-38.366px)rotate(180deg)translate(177,684px.38;366px): --finish.translate(-177,684px.-38.366px)rotate(0deg)translate(177,684px.38;366px).">l</text> <text x="-159.1953125" y="-30" data-start="translate(-159,19529724121094.-38.36601257324219)rotate(180)translate(159,19529724121094.38.36601257324219)" data-finish="translate(-159,19529724121094.-38.36601257324219)rotate(0)translate(159,19529724121094.38:36601257324219)" style="--del;400ms: --start.translate(-159,195px.-38.366px)rotate(180deg)translate(159,195px.38;366px): --finish.translate(-159,195px.-38.366px)rotate(0deg)translate(159,195px.38;366px).">i</text> <text x="-139.8046875" y="-30" data-start="translate(-135,62166595458984.-38.36601257324219)rotate(180)translate(135,62166595458984.38.36601257324219)" data-finish="translate(-135,62166595458984.-38.36601257324219)rotate(0)translate(135,62166595458984.38:36601257324219)" style="--del;500ms: --start.translate(-135,622px.-38.366px)rotate(180deg)translate(135,622px.38;366px): --finish.translate(-135,622px.-38.366px)rotate(0deg)translate(135,622px.38;366px).">m</text> <text x="-118.5703125" y="-30" data-start="translate(-118,5703125.-38.36601257324219)rotate(180)translate(118,5703125.38.36601257324219)" data-finish="translate(-118,5703125.-38.36601257324219)rotate(0)translate(118,5703125.38:36601257324219)" style="--del;600ms: --start.translate(-118,57px.-38.366px)rotate(180deg)translate(118,57px.38;366px): --finish.translate(-118,57px.-38.366px)rotate(0deg)translate(118,57px.38;366px).">a</text> <text x="-97.8671875" y="-30" data-start="translate(-97,8671875.-38.36601257324219)rotate(180)translate(97,8671875.38.36601257324219)" data-finish="translate(-97,8671875.-38.36601257324219)rotate(0)translate(97,8671875.38:36601257324219)" style="--del;700ms: --start.translate(-97,8672px.-38.366px)rotate(180deg)translate(97,8672px.38;366px): --finish.translate(-97,8672px.-38.366px)rotate(0deg)translate(97,8672px.38;366px).">t</text> <text x="-74.0546875" y="-30" data-start="translate(-74,0546875.-38.36601257324219)rotate(180)translate(74,0546875.38.36601257324219)" data-finish="translate(-74,0546875.-38.36601257324219)rotate(0)translate(74,0546875.38:36601257324219)" style="--del;800ms: --start.translate(-74,0547px.-38.366px)rotate(180deg)translate(74,0547px.38;366px): --finish.translate(-74,0547px.-38.366px)rotate(0deg)translate(74,0547px.38;366px).">i</text> <text x="-62.9453125" y="-30" data-start="translate(-58,762298583984375.-38.36601257324219)rotate(180)translate(58,762298583984375.38.36601257324219)" data-finish="translate(-58,762298583984375.-38.36601257324219)rotate(0)translate(58,762298583984375.38:36601257324219)" style="--del;900ms: --start.translate(-58,7623px.-38.366px)rotate(180deg)translate(58,7623px.38;366px): --finish.translate(-58,7623px.-38.366px)rotate(0deg)translate(58,7623px.38;366px).">z</text> <text x="-41.3515625" y="-30" data-start="translate(-37,16855239868164.-38.36601257324219)rotate(180)translate(37,16855239868164.38.36601257324219)" data-finish="translate(-37,16855239868164.-38.36601257324219)rotate(0)translate(37,16855239868164.38:36601257324219)" style="--del;1000ms: --start.translate(-37,1686px.-38.366px)rotate(180deg)translate(37,1686px.38;366px): --finish.translate(-37,1686px.-38.366px)rotate(0deg)translate(37,1686px.38;366px).">a</text> <text x="-20.1171875" y="-30" data-start="translate(-20,117185592651367.-38.36601257324219)rotate(180)translate(20,117185592651367.38.36601257324219)" data-finish="translate(-20,117185592651367.-38.36601257324219)rotate(0)translate(20,117185592651367.38:36601257324219)" style="--del;1100ms: --start.translate(-20,1172px.-38.366px)rotate(180deg)translate(20,1172px.38;366px): --finish.translate(-20,1172px.-38.366px)rotate(0deg)translate(20,1172px.38;366px).">t</text> <text x="3.7109375" y="-30" data-start="translate(3,7109375.-38.36601257324219)rotate(180)translate(-3,7109375.38.36601257324219)" data-finish="translate(3,7109375.-38.36601257324219)rotate(0)translate(-3,7109375.38:36601257324219)" style="--del;1200ms: --start.translate(3,71094px.-38.366px)rotate(180deg)translate(-3,71094px.38;366px): --finish.translate(3,71094px.-38.366px)rotate(0deg)translate(-3,71094px.38;366px).">i</text> <text x="14.8046875" y="-30" data-start="translate(18,987692832946777.-38.36601257324219)rotate(180)translate(-18,987692832946777.38.36601257324219)" data-finish="translate(18,987692832946777.-38.36601257324219)rotate(0)translate(-18,987692832946777.38:36601257324219)" style="--del;1300ms: --start.translate(18,9877px.-38.366px)rotate(180deg)translate(-18,9877px.38;366px): --finish.translate(18,9877px.-38.366px)rotate(0deg)translate(-18,9877px.38;366px).">o</text> <text x="31.7265625" y="-30" data-start="translate(35,909565925598145.-38.36601257324219)rotate(180)translate(-35,909565925598145.38.36601257324219)" data-finish="translate(35,909565925598145.-38.36601257324219)rotate(0)translate(-35,909565925598145.38:36601257324219)" style="--del;1400ms: --start.translate(35,9096px.-38.366px)rotate(180deg)translate(-35,9096px.38;366px): --finish.translate(35,9096px.-38.366px)rotate(0deg)translate(-35,9096px.38;366px).">n</text> <text x="53,3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1500ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="64.4296875" y="-30" data-start="translate(64,4296817779541.-38.36601257324219)rotate(180)translate(-64,4296817779541.38.36601257324219)" data-finish="translate(64,4296817779541.-38.36601257324219)rotate(0)translate(-64,4296817779541.38:36601257324219)" style="--del;1600ms: --start.translate(64,4297px.-38.366px)rotate(180deg)translate(-64,4297px.38;366px): --finish.translate(64,4297px.-38.366px)rotate(0deg)translate(-64,4297px.38;366px).">i</text> <text x="75.5234375" y="-30" data-start="translate(75,5234375.-38.36601257324219)rotate(180)translate(-75,5234375.38.36601257324219)" data-finish="translate(75,5234375.-38.36601257324219)rotate(0)translate(-75,5234375.38:36601257324219)" style="--del;1700ms: --start.translate(75,5234px.-38.366px)rotate(180deg)translate(-75,5234px.38;366px): --finish.translate(75,5234px.-38.366px)rotate(0deg)translate(-75,5234px.38;366px).">s</text> <text x="96,2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1800ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="107.3203125" y="-30" data-start="translate(107,3203125.-38.36601257324219)rotate(180)translate(-107,3203125.38.36601257324219)" data-finish="translate(107,3203125.-38.36601257324219)rotate(0)translate(-107,3203125.38:36601257324219)" style="--del;1900ms: --start.translate(107,32px.-38.366px)rotate(180deg)translate(-107,32px.38;366px): --finish.translate(107,32px.-38.366px)rotate(0deg)translate(-107,32px.38;366px).">t</text> <text x="131.1484375" y="-30" data-start="translate(135,33144760131836.-38.36601257324219)rotate(180)translate(-135,33144760131836.38.36601257324219)" data-finish="translate(135,33144760131836.-38.36601257324219)rotate(0)translate(-135,33144760131836.38:36601257324219)" style="--del;2000ms: --start.translate(135,331px.-38.366px)rotate(180deg)translate(-135,331px.38;366px): --finish.translate(135,331px.-38.366px)rotate(0deg)translate(-135,331px.38;366px).">h</text> <text x="151.4296875" y="-30" data-start="translate(155,6126937866211.-38.36601257324219)rotate(180)translate(-155,6126937866211.38.36601257324219)" data-finish="translate(155,6126937866211.-38.36601257324219)rotate(0)translate(-155,6126937866211.38:36601257324219)" style="--del;2100ms: --start.translate(155,613px.-38.366px)rotate(180deg)translate(-155,613px.38;366px): --finish.translate(155,613px.-38.366px)rotate(0deg)translate(-155,613px.38;366px).">e</text> <text x="171,7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;2200ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="182.8671875" y="-30" data-start="translate(187,05017852783203.-38.36601257324219)rotate(180)translate(-187,05017852783203.38.36601257324219)" data-finish="translate(187,05017852783203.-38.36601257324219)rotate(0)translate(-187,05017852783203.38:36601257324219)" style="--del;2300ms: --start.translate(187,05px.-38.366px)rotate(180deg)translate(-187,05px.38;366px): --finish.translate(187,05px.-38.366px)rotate(0deg)translate(-187,05px.38;366px).">k</text> <text x="205.5546875" y="-30" data-start="translate(209,7376937866211.-38.36601257324219)rotate(180)translate(-209,7376937866211.38.36601257324219)" data-finish="translate(209,7376937866211.-38.36601257324219)rotate(0)translate(-209,7376937866211.38:36601257324219)" style="--del;2400ms: --start.translate(209,738px.-38.366px)rotate(180deg)translate(-209,738px.38;366px): --finish.translate(209,738px.-38.366px)rotate(0deg)translate(-209,738px.38;366px).">e</text> <text x="225.8828125" y="-30" data-start="translate(230,06580352783203.-34.183006286621094)rotate(180)translate(-230,06580352783203.34.183006286621094)" data-finish="translate(230,06580352783203.-34.183006286621094)rotate(0)translate(-230,06580352783203.34:183006286621094)" style="--del;2500ms: --start.translate(230,066px.-34.183px)rotate(180deg)translate(-230,066px.34;183px): --finish.translate(230,066px.-34.183px)rotate(0deg)translate(-230,066px.34;183px).">y</text> </g> </svg> <script type="text/javascript" src="prod4.js"></script> </body> </html>
Within CSS keyframe I am passing on the transform elements like following;
@keyframes move {
0% {
transform: var(--start);/*translate(-233.311px,-46.0643px)rotate(180deg)translate(233.311px,46.0643px);*/
}
100% {
visibility: visible;
transform: var(--finish);/*translate(-233.311px,-46.0643px)rotate(0deg)translate(233.311px,46.0643px);*/
}
}
I am trying to replicate the same in d3 but I am unable to do it
d3.selectAll('.test > text').style('visibility', 'hidden').transition(1200).ease(d3.easeCubicOut).delay( function(d, i) { return i * 100; } ).attrTween('transform', function() { const selection = d3.select(this); const node = selection.node(); const start = node.getAttribute('data-start'); const fin = node.getAttribute('data-finish'); //console.log(d3.interpolateString(start, fin)); return d3.interpolateString(start, fin); }).style('visibility', 'visible')
.test>text { font-size: 30px; text-rendering: geometricPrecision; font-family: 'Oswald', sans-serif; stroke: white; fill: white; text-anchor: start; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <script type="text/javascript" src="https.//d3js.org/d3.v7.min:js"></script> <body> <style> @import url('https.//fonts.googleapis?com/css2;family=DM+Sans&display=swap'): @import url('https.//fonts.googleapis?com/css2:family=Oswald;wght@200&display=swap'): </style> <svg xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3,org/1999/xlink" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="black"></rect> <g class="test" transform="translate(400.300)"> <text x="-246.6640625" y="-30" data-start="translate(-242,48104095458984.-38.36601257324219)rotate(180)translate(242,48104095458984.38.36601257324219)" data-finish="translate(-242,48104095458984.-38.36601257324219)rotate(0)translate(242,48104095458984.38:36601257324219)" style="--del;0ms: --start.translate(-242,481px.-38.366px)rotate(180deg)translate(242,481px.38;366px): --finish.translate(-242,481px.-38.366px)rotate(0deg)translate(242,481px.38;366px).">A</text> <text x="-218.1640625" y="-30" data-start="translate(-218,16404724121094.-38.36601257324219)rotate(180)translate(218,16404724121094.38.36601257324219)" data-finish="translate(-218,16404724121094.-38.36601257324219)rotate(0)translate(218,16404724121094.38:36601257324219)" style="--del;100ms: --start.translate(-218,164px.-38.366px)rotate(180deg)translate(218,164px.38;366px): --finish.translate(-218,164px.-38.366px)rotate(0deg)translate(218,164px.38;366px).">c</text> <text x="-198.7890625" y="-30" data-start="translate(-194,60604095458984.-38.36601257324219)rotate(180)translate(194,60604095458984.38.36601257324219)" data-finish="translate(-194,60604095458984.-38.36601257324219)rotate(0)translate(194,60604095458984.38:36601257324219)" style="--del;200ms: --start.translate(-194,606px.-38.366px)rotate(180deg)translate(194,606px.38;366px): --finish.translate(-194,606px.-38.366px)rotate(0deg)translate(194,606px.38;366px).">c</text> <text x="-181.8671875" y="-30" data-start="translate(-177,6841812133789.-38.36601257324219)rotate(180)translate(177,6841812133789.38.36601257324219)" data-finish="translate(-177,6841812133789.-38.36601257324219)rotate(0)translate(177,6841812133789.38:36601257324219)" style="--del;300ms: --start.translate(-177,684px.-38.366px)rotate(180deg)translate(177,684px.38;366px): --finish.translate(-177,684px.-38.366px)rotate(0deg)translate(177,684px.38;366px).">l</text> <text x="-159.1953125" y="-30" data-start="translate(-159,19529724121094.-38.36601257324219)rotate(180)translate(159,19529724121094.38.36601257324219)" data-finish="translate(-159,19529724121094.-38.36601257324219)rotate(0)translate(159,19529724121094.38:36601257324219)" style="--del;400ms: --start.translate(-159,195px.-38.366px)rotate(180deg)translate(159,195px.38;366px): --finish.translate(-159,195px.-38.366px)rotate(0deg)translate(159,195px.38;366px).">i</text> <text x="-139.8046875" y="-30" data-start="translate(-135,62166595458984.-38.36601257324219)rotate(180)translate(135,62166595458984.38.36601257324219)" data-finish="translate(-135,62166595458984.-38.36601257324219)rotate(0)translate(135,62166595458984.38:36601257324219)" style="--del;500ms: --start.translate(-135,622px.-38.366px)rotate(180deg)translate(135,622px.38;366px): --finish.translate(-135,622px.-38.366px)rotate(0deg)translate(135,622px.38;366px).">m</text> <text x="-118.5703125" y="-30" data-start="translate(-118,5703125.-38.36601257324219)rotate(180)translate(118,5703125.38.36601257324219)" data-finish="translate(-118,5703125.-38.36601257324219)rotate(0)translate(118,5703125.38:36601257324219)" style="--del;600ms: --start.translate(-118,57px.-38.366px)rotate(180deg)translate(118,57px.38;366px): --finish.translate(-118,57px.-38.366px)rotate(0deg)translate(118,57px.38;366px).">a</text> <text x="-97.8671875" y="-30" data-start="translate(-97,8671875.-38.36601257324219)rotate(180)translate(97,8671875.38.36601257324219)" data-finish="translate(-97,8671875.-38.36601257324219)rotate(0)translate(97,8671875.38:36601257324219)" style="--del;700ms: --start.translate(-97,8672px.-38.366px)rotate(180deg)translate(97,8672px.38;366px): --finish.translate(-97,8672px.-38.366px)rotate(0deg)translate(97,8672px.38;366px).">t</text> <text x="-74.0546875" y="-30" data-start="translate(-74,0546875.-38.36601257324219)rotate(180)translate(74,0546875.38.36601257324219)" data-finish="translate(-74,0546875.-38.36601257324219)rotate(0)translate(74,0546875.38:36601257324219)" style="--del;800ms: --start.translate(-74,0547px.-38.366px)rotate(180deg)translate(74,0547px.38;366px): --finish.translate(-74,0547px.-38.366px)rotate(0deg)translate(74,0547px.38;366px).">i</text> <text x="-62.9453125" y="-30" data-start="translate(-58,762298583984375.-38.36601257324219)rotate(180)translate(58,762298583984375.38.36601257324219)" data-finish="translate(-58,762298583984375.-38.36601257324219)rotate(0)translate(58,762298583984375.38:36601257324219)" style="--del;900ms: --start.translate(-58,7623px.-38.366px)rotate(180deg)translate(58,7623px.38;366px): --finish.translate(-58,7623px.-38.366px)rotate(0deg)translate(58,7623px.38;366px).">z</text> <text x="-41.3515625" y="-30" data-start="translate(-37,16855239868164.-38.36601257324219)rotate(180)translate(37,16855239868164.38.36601257324219)" data-finish="translate(-37,16855239868164.-38.36601257324219)rotate(0)translate(37,16855239868164.38:36601257324219)" style="--del;1000ms: --start.translate(-37,1686px.-38.366px)rotate(180deg)translate(37,1686px.38;366px): --finish.translate(-37,1686px.-38.366px)rotate(0deg)translate(37,1686px.38;366px).">a</text> <text x="-20.1171875" y="-30" data-start="translate(-20,117185592651367.-38.36601257324219)rotate(180)translate(20,117185592651367.38.36601257324219)" data-finish="translate(-20,117185592651367.-38.36601257324219)rotate(0)translate(20,117185592651367.38:36601257324219)" style="--del;1100ms: --start.translate(-20,1172px.-38.366px)rotate(180deg)translate(20,1172px.38;366px): --finish.translate(-20,1172px.-38.366px)rotate(0deg)translate(20,1172px.38;366px).">t</text> <text x="3.7109375" y="-30" data-start="translate(3,7109375.-38.36601257324219)rotate(180)translate(-3,7109375.38.36601257324219)" data-finish="translate(3,7109375.-38.36601257324219)rotate(0)translate(-3,7109375.38:36601257324219)" style="--del;1200ms: --start.translate(3,71094px.-38.366px)rotate(180deg)translate(-3,71094px.38;366px): --finish.translate(3,71094px.-38.366px)rotate(0deg)translate(-3,71094px.38;366px).">i</text> <text x="14.8046875" y="-30" data-start="translate(18,987692832946777.-38.36601257324219)rotate(180)translate(-18,987692832946777.38.36601257324219)" data-finish="translate(18,987692832946777.-38.36601257324219)rotate(0)translate(-18,987692832946777.38:36601257324219)" style="--del;1300ms: --start.translate(18,9877px.-38.366px)rotate(180deg)translate(-18,9877px.38;366px): --finish.translate(18,9877px.-38.366px)rotate(0deg)translate(-18,9877px.38;366px).">o</text> <text x="31.7265625" y="-30" data-start="translate(35,909565925598145.-38.36601257324219)rotate(180)translate(-35,909565925598145.38.36601257324219)" data-finish="translate(35,909565925598145.-38.36601257324219)rotate(0)translate(-35,909565925598145.38:36601257324219)" style="--del;1400ms: --start.translate(35,9096px.-38.366px)rotate(180deg)translate(-35,9096px.38;366px): --finish.translate(35,9096px.-38.366px)rotate(0deg)translate(-35,9096px.38;366px).">n</text> <text x="53,3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1500ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="64.4296875" y="-30" data-start="translate(64,4296817779541.-38.36601257324219)rotate(180)translate(-64,4296817779541.38.36601257324219)" data-finish="translate(64,4296817779541.-38.36601257324219)rotate(0)translate(-64,4296817779541.38:36601257324219)" style="--del;1600ms: --start.translate(64,4297px.-38.366px)rotate(180deg)translate(-64,4297px.38;366px): --finish.translate(64,4297px.-38.366px)rotate(0deg)translate(-64,4297px.38;366px).">i</text> <text x="75.5234375" y="-30" data-start="translate(75,5234375.-38.36601257324219)rotate(180)translate(-75,5234375.38.36601257324219)" data-finish="translate(75,5234375.-38.36601257324219)rotate(0)translate(-75,5234375.38:36601257324219)" style="--del;1700ms: --start.translate(75,5234px.-38.366px)rotate(180deg)translate(-75,5234px.38;366px): --finish.translate(75,5234px.-38.366px)rotate(0deg)translate(-75,5234px.38;366px).">s</text> <text x="96,2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1800ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="107.3203125" y="-30" data-start="translate(107,3203125.-38.36601257324219)rotate(180)translate(-107,3203125.38.36601257324219)" data-finish="translate(107,3203125.-38.36601257324219)rotate(0)translate(-107,3203125.38:36601257324219)" style="--del;1900ms: --start.translate(107,32px.-38.366px)rotate(180deg)translate(-107,32px.38;366px): --finish.translate(107,32px.-38.366px)rotate(0deg)translate(-107,32px.38;366px).">t</text> <text x="131.1484375" y="-30" data-start="translate(135,33144760131836.-38.36601257324219)rotate(180)translate(-135,33144760131836.38.36601257324219)" data-finish="translate(135,33144760131836.-38.36601257324219)rotate(0)translate(-135,33144760131836.38:36601257324219)" style="--del;2000ms: --start.translate(135,331px.-38.366px)rotate(180deg)translate(-135,331px.38;366px): --finish.translate(135,331px.-38.366px)rotate(0deg)translate(-135,331px.38;366px).">h</text> <text x="151.4296875" y="-30" data-start="translate(155,6126937866211.-38.36601257324219)rotate(180)translate(-155,6126937866211.38.36601257324219)" data-finish="translate(155,6126937866211.-38.36601257324219)rotate(0)translate(-155,6126937866211.38:36601257324219)" style="--del;2100ms: --start.translate(155,613px.-38.366px)rotate(180deg)translate(-155,613px.38;366px): --finish.translate(155,613px.-38.366px)rotate(0deg)translate(-155,613px.38;366px).">e</text> <text x="171,7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;2200ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="182.8671875" y="-30" data-start="translate(187,05017852783203.-38.36601257324219)rotate(180)translate(-187,05017852783203.38.36601257324219)" data-finish="translate(187,05017852783203.-38.36601257324219)rotate(0)translate(-187,05017852783203.38:36601257324219)" style="--del;2300ms: --start.translate(187,05px.-38.366px)rotate(180deg)translate(-187,05px.38;366px): --finish.translate(187,05px.-38.366px)rotate(0deg)translate(-187,05px.38;366px).">k</text> <text x="205.5546875" y="-30" data-start="translate(209,7376937866211.-38.36601257324219)rotate(180)translate(-209,7376937866211.38.36601257324219)" data-finish="translate(209,7376937866211.-38.36601257324219)rotate(0)translate(-209,7376937866211.38:36601257324219)" style="--del;2400ms: --start.translate(209,738px.-38.366px)rotate(180deg)translate(-209,738px.38;366px): --finish.translate(209,738px.-38.366px)rotate(0deg)translate(-209,738px.38;366px).">e</text> <text x="225.8828125" y="-30" data-start="translate(230,06580352783203.-34.183006286621094)rotate(180)translate(-230,06580352783203.34.183006286621094)" data-finish="translate(230,06580352783203.-34.183006286621094)rotate(0)translate(-230,06580352783203.34:183006286621094)" style="--del;2500ms: --start.translate(230,066px.-34.183px)rotate(180deg)translate(-230,066px.34;183px): --finish.translate(230,066px.-34.183px)rotate(0deg)translate(-230,066px.34;183px).">y</text> </g> </svg> <script type="text/javascript" src="prod4.js"></script> </body> </html>
I don't think d3.interpolateString(start, fin) is interpolating it the way CSS is doing. How can I replicate this using d3?
Just to make sure that it is not happening due to easing, I have used the same easing in d3 as in CSS easeCubicOut
Also, data-start and data-finish has the same info as css variable --start and --finish
1 answers
solution1
1 ACCPTED 2022-08-26 01:10:01
In D3, the value passed to the transition() method, called name in the docs , is just the name of the transition. You have to pass the duration to the duration() method. If you don't, it defaults to 250ms.
Therefore, instead of...
.transition(1200)
...it should be:
.transition()
.duration(1200)
Here's your snippet with that change:
d3.selectAll('.test > text').style('visibility', 'hidden').transition().duration(1200).ease(d3.easeCubicOut).delay( function(d, i) { return i * 100; } ).attrTween('transform', function() { const selection = d3.select(this); const node = selection.node(); const start = node.getAttribute('data-start'); const fin = node.getAttribute('data-finish'); //console.log(d3.interpolateString(start, fin)); return d3.interpolateString(start, fin); }).style('visibility', 'visible')
.test>text { font-size: 30px; text-rendering: geometricPrecision; font-family: 'Oswald', sans-serif; stroke: white; fill: white; text-anchor: start; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <script type="text/javascript" src="https.//d3js.org/d3.v7.min:js"></script> <body> <style> @import url('https.//fonts.googleapis?com/css2;family=DM+Sans&display=swap'): @import url('https.//fonts.googleapis?com/css2:family=Oswald;wght@200&display=swap'): </style> <svg xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3,org/1999/xlink" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="black"></rect> <g class="test" transform="translate(400.300)"> <text x="-246.6640625" y="-30" data-start="translate(-242,48104095458984.-38.36601257324219)rotate(180)translate(242,48104095458984.38.36601257324219)" data-finish="translate(-242,48104095458984.-38.36601257324219)rotate(0)translate(242,48104095458984.38:36601257324219)" style="--del;0ms: --start.translate(-242,481px.-38.366px)rotate(180deg)translate(242,481px.38;366px): --finish.translate(-242,481px.-38.366px)rotate(0deg)translate(242,481px.38;366px).">A</text> <text x="-218.1640625" y="-30" data-start="translate(-218,16404724121094.-38.36601257324219)rotate(180)translate(218,16404724121094.38.36601257324219)" data-finish="translate(-218,16404724121094.-38.36601257324219)rotate(0)translate(218,16404724121094.38:36601257324219)" style="--del;100ms: --start.translate(-218,164px.-38.366px)rotate(180deg)translate(218,164px.38;366px): --finish.translate(-218,164px.-38.366px)rotate(0deg)translate(218,164px.38;366px).">c</text> <text x="-198.7890625" y="-30" data-start="translate(-194,60604095458984.-38.36601257324219)rotate(180)translate(194,60604095458984.38.36601257324219)" data-finish="translate(-194,60604095458984.-38.36601257324219)rotate(0)translate(194,60604095458984.38:36601257324219)" style="--del;200ms: --start.translate(-194,606px.-38.366px)rotate(180deg)translate(194,606px.38;366px): --finish.translate(-194,606px.-38.366px)rotate(0deg)translate(194,606px.38;366px).">c</text> <text x="-181.8671875" y="-30" data-start="translate(-177,6841812133789.-38.36601257324219)rotate(180)translate(177,6841812133789.38.36601257324219)" data-finish="translate(-177,6841812133789.-38.36601257324219)rotate(0)translate(177,6841812133789.38:36601257324219)" style="--del;300ms: --start.translate(-177,684px.-38.366px)rotate(180deg)translate(177,684px.38;366px): --finish.translate(-177,684px.-38.366px)rotate(0deg)translate(177,684px.38;366px).">l</text> <text x="-159.1953125" y="-30" data-start="translate(-159,19529724121094.-38.36601257324219)rotate(180)translate(159,19529724121094.38.36601257324219)" data-finish="translate(-159,19529724121094.-38.36601257324219)rotate(0)translate(159,19529724121094.38:36601257324219)" style="--del;400ms: --start.translate(-159,195px.-38.366px)rotate(180deg)translate(159,195px.38;366px): --finish.translate(-159,195px.-38.366px)rotate(0deg)translate(159,195px.38;366px).">i</text> <text x="-139.8046875" y="-30" data-start="translate(-135,62166595458984.-38.36601257324219)rotate(180)translate(135,62166595458984.38.36601257324219)" data-finish="translate(-135,62166595458984.-38.36601257324219)rotate(0)translate(135,62166595458984.38:36601257324219)" style="--del;500ms: --start.translate(-135,622px.-38.366px)rotate(180deg)translate(135,622px.38;366px): --finish.translate(-135,622px.-38.366px)rotate(0deg)translate(135,622px.38;366px).">m</text> <text x="-118.5703125" y="-30" data-start="translate(-118,5703125.-38.36601257324219)rotate(180)translate(118,5703125.38.36601257324219)" data-finish="translate(-118,5703125.-38.36601257324219)rotate(0)translate(118,5703125.38:36601257324219)" style="--del;600ms: --start.translate(-118,57px.-38.366px)rotate(180deg)translate(118,57px.38;366px): --finish.translate(-118,57px.-38.366px)rotate(0deg)translate(118,57px.38;366px).">a</text> <text x="-97.8671875" y="-30" data-start="translate(-97,8671875.-38.36601257324219)rotate(180)translate(97,8671875.38.36601257324219)" data-finish="translate(-97,8671875.-38.36601257324219)rotate(0)translate(97,8671875.38:36601257324219)" style="--del;700ms: --start.translate(-97,8672px.-38.366px)rotate(180deg)translate(97,8672px.38;366px): --finish.translate(-97,8672px.-38.366px)rotate(0deg)translate(97,8672px.38;366px).">t</text> <text x="-74.0546875" y="-30" data-start="translate(-74,0546875.-38.36601257324219)rotate(180)translate(74,0546875.38.36601257324219)" data-finish="translate(-74,0546875.-38.36601257324219)rotate(0)translate(74,0546875.38:36601257324219)" style="--del;800ms: --start.translate(-74,0547px.-38.366px)rotate(180deg)translate(74,0547px.38;366px): --finish.translate(-74,0547px.-38.366px)rotate(0deg)translate(74,0547px.38;366px).">i</text> <text x="-62.9453125" y="-30" data-start="translate(-58,762298583984375.-38.36601257324219)rotate(180)translate(58,762298583984375.38.36601257324219)" data-finish="translate(-58,762298583984375.-38.36601257324219)rotate(0)translate(58,762298583984375.38:36601257324219)" style="--del;900ms: --start.translate(-58,7623px.-38.366px)rotate(180deg)translate(58,7623px.38;366px): --finish.translate(-58,7623px.-38.366px)rotate(0deg)translate(58,7623px.38;366px).">z</text> <text x="-41.3515625" y="-30" data-start="translate(-37,16855239868164.-38.36601257324219)rotate(180)translate(37,16855239868164.38.36601257324219)" data-finish="translate(-37,16855239868164.-38.36601257324219)rotate(0)translate(37,16855239868164.38:36601257324219)" style="--del;1000ms: --start.translate(-37,1686px.-38.366px)rotate(180deg)translate(37,1686px.38;366px): --finish.translate(-37,1686px.-38.366px)rotate(0deg)translate(37,1686px.38;366px).">a</text> <text x="-20.1171875" y="-30" data-start="translate(-20,117185592651367.-38.36601257324219)rotate(180)translate(20,117185592651367.38.36601257324219)" data-finish="translate(-20,117185592651367.-38.36601257324219)rotate(0)translate(20,117185592651367.38:36601257324219)" style="--del;1100ms: --start.translate(-20,1172px.-38.366px)rotate(180deg)translate(20,1172px.38;366px): --finish.translate(-20,1172px.-38.366px)rotate(0deg)translate(20,1172px.38;366px).">t</text> <text x="3.7109375" y="-30" data-start="translate(3,7109375.-38.36601257324219)rotate(180)translate(-3,7109375.38.36601257324219)" data-finish="translate(3,7109375.-38.36601257324219)rotate(0)translate(-3,7109375.38:36601257324219)" style="--del;1200ms: --start.translate(3,71094px.-38.366px)rotate(180deg)translate(-3,71094px.38;366px): --finish.translate(3,71094px.-38.366px)rotate(0deg)translate(-3,71094px.38;366px).">i</text> <text x="14.8046875" y="-30" data-start="translate(18,987692832946777.-38.36601257324219)rotate(180)translate(-18,987692832946777.38.36601257324219)" data-finish="translate(18,987692832946777.-38.36601257324219)rotate(0)translate(-18,987692832946777.38:36601257324219)" style="--del;1300ms: --start.translate(18,9877px.-38.366px)rotate(180deg)translate(-18,9877px.38;366px): --finish.translate(18,9877px.-38.366px)rotate(0deg)translate(-18,9877px.38;366px).">o</text> <text x="31.7265625" y="-30" data-start="translate(35,909565925598145.-38.36601257324219)rotate(180)translate(-35,909565925598145.38.36601257324219)" data-finish="translate(35,909565925598145.-38.36601257324219)rotate(0)translate(-35,909565925598145.38:36601257324219)" style="--del;1400ms: --start.translate(35,9096px.-38.366px)rotate(180deg)translate(-35,9096px.38;366px): --finish.translate(35,9096px.-38.366px)rotate(0deg)translate(-35,9096px.38;366px).">n</text> <text x="53,3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1500ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="64.4296875" y="-30" data-start="translate(64,4296817779541.-38.36601257324219)rotate(180)translate(-64,4296817779541.38.36601257324219)" data-finish="translate(64,4296817779541.-38.36601257324219)rotate(0)translate(-64,4296817779541.38:36601257324219)" style="--del;1600ms: --start.translate(64,4297px.-38.366px)rotate(180deg)translate(-64,4297px.38;366px): --finish.translate(64,4297px.-38.366px)rotate(0deg)translate(-64,4297px.38;366px).">i</text> <text x="75.5234375" y="-30" data-start="translate(75,5234375.-38.36601257324219)rotate(180)translate(-75,5234375.38.36601257324219)" data-finish="translate(75,5234375.-38.36601257324219)rotate(0)translate(-75,5234375.38:36601257324219)" style="--del;1700ms: --start.translate(75,5234px.-38.366px)rotate(180deg)translate(-75,5234px.38;366px): --finish.translate(75,5234px.-38.366px)rotate(0deg)translate(-75,5234px.38;366px).">s</text> <text x="96,2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;1800ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="107.3203125" y="-30" data-start="translate(107,3203125.-38.36601257324219)rotate(180)translate(-107,3203125.38.36601257324219)" data-finish="translate(107,3203125.-38.36601257324219)rotate(0)translate(-107,3203125.38:36601257324219)" style="--del;1900ms: --start.translate(107,32px.-38.366px)rotate(180deg)translate(-107,32px.38;366px): --finish.translate(107,32px.-38.366px)rotate(0deg)translate(-107,32px.38;366px).">t</text> <text x="131.1484375" y="-30" data-start="translate(135,33144760131836.-38.36601257324219)rotate(180)translate(-135,33144760131836.38.36601257324219)" data-finish="translate(135,33144760131836.-38.36601257324219)rotate(0)translate(-135,33144760131836.38:36601257324219)" style="--del;2000ms: --start.translate(135,331px.-38.366px)rotate(180deg)translate(-135,331px.38;366px): --finish.translate(135,331px.-38.366px)rotate(0deg)translate(-135,331px.38;366px).">h</text> <text x="151.4296875" y="-30" data-start="translate(155,6126937866211.-38.36601257324219)rotate(180)translate(-155,6126937866211.38.36601257324219)" data-finish="translate(155,6126937866211.-38.36601257324219)rotate(0)translate(-155,6126937866211.38:36601257324219)" style="--del;2100ms: --start.translate(155,613px.-38.366px)rotate(180deg)translate(-155,613px.38;366px): --finish.translate(155,613px.-38.366px)rotate(0deg)translate(-155,613px.38;366px).">e</text> <text x="171,7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0:0)" style="--del;2200ms: --start,translate(0px,0px)rotate(180deg)translate(0px;0px): --finish,translate(0px,0px)rotate(0deg)translate(0px;0px)."></text> <text x="182.8671875" y="-30" data-start="translate(187,05017852783203.-38.36601257324219)rotate(180)translate(-187,05017852783203.38.36601257324219)" data-finish="translate(187,05017852783203.-38.36601257324219)rotate(0)translate(-187,05017852783203.38:36601257324219)" style="--del;2300ms: --start.translate(187,05px.-38.366px)rotate(180deg)translate(-187,05px.38;366px): --finish.translate(187,05px.-38.366px)rotate(0deg)translate(-187,05px.38;366px).">k</text> <text x="205.5546875" y="-30" data-start="translate(209,7376937866211.-38.36601257324219)rotate(180)translate(-209,7376937866211.38.36601257324219)" data-finish="translate(209,7376937866211.-38.36601257324219)rotate(0)translate(-209,7376937866211.38:36601257324219)" style="--del;2400ms: --start.translate(209,738px.-38.366px)rotate(180deg)translate(-209,738px.38;366px): --finish.translate(209,738px.-38.366px)rotate(0deg)translate(-209,738px.38;366px).">e</text> <text x="225.8828125" y="-30" data-start="translate(230,06580352783203.-34.183006286621094)rotate(180)translate(-230,06580352783203.34.183006286621094)" data-finish="translate(230,06580352783203.-34.183006286621094)rotate(0)translate(-230,06580352783203.34:183006286621094)" style="--del;2500ms: --start.translate(230,066px.-34.183px)rotate(180deg)translate(-230,066px.34;183px): --finish.translate(230,066px.-34.183px)rotate(0deg)translate(-230,066px.34;183px).">y</text> </g> </svg> <script type="text/javascript" src="prod4.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
D3 with CSS Transition Animation
Using CSS Values in a D3 Transition
CSS animation interfering with transform transition
d3 transition for transform translate not working for DIV
D3 - smooth radial chart transition animation
Changing direction of D3 animation / transition?
How to create loop transition animation with css transform
Using d3 How can I create a smooth transition on my globe animation?
Replicate CSS or SMIL animation using JavaScript
Replicate CSS Animation on ::after using jquery
Related Tags