Tile hover view concept move mouse over a rectangle triggers transition rotates and moves to the left Second transition after a certain amount of time to make the rectangle fade away style body height 600px margin 0 rect stroke fff stroke width 1px style script type text javascript src https d3js org d3 v7 min js script script const w 960 const h 500 const z 20 const x w z const y h z var svg d3 select body append svg attr width w attr height h svg selectAll rect data d3 range x y enter append rect attr transform translate attr width z attr height z style fill function d return d3 hsl d x x 360 1 Math floor d x y on mouseover mouseover function translate d return translate d x z Math floor d x z function mouseover d force the rectangle on display to the front z index this parentNode appendChild this d3 select this style pointer events none transition duration 850 attr transform translate 480 480 scale 23 rotate 180 transition delay 1500 attr transform translate 240 240 scale 0 style fill opacity 0 remove console log ready script Takes the previous idea but instead of color rectangles uses images for a mozaic type of feel Ideas for improvement Map color on top of the images so there is a pattern image Have the images return to their starting position instead of fading away Each time image is viewed it transitions back but a new image is replaced instead always seeing new images Mixing different transition effects Single image but only show a small region in the output instead of loading lots of different images style body height 600px margin 0 img padding 0 margin 0 width 100 height 100 style script type text javascript src https d3js org d3 v7 min js script script const w 960 const h 500 const z 20 const x w z const y h z var svg d3 select body append svg attr width w attr height h var imgs svg selectAll image data 0 imgs data d3 range x y enter append svg image attr transform translate attr width z attr height z attr xlink href function d return https picsum photos 200 random d on mouseover mouseover function translate d return translate d x z Math floor d x z function mouseover d this parentNode appendChild this d3 select this style pointer events none transition duration 850 attrTween transform transformTween transition delay 1500 attr transform translate 240 240 scale 0 style fill opacity 0 remove Added so the rotation went through 360 image correct way up also offset translation z 0 5 so the image rotated around the centre instead of the edge function transformTween d var i d3 interpolate 0 360 var s d3 interpolate 1 23 var tx d3 interpolate d x z 240 var ty d3 interpolate Math floor d x z 240 return function t return translate tx t z 0 5 ty t z 0 5 scale s t rotate i t translate z 0 5 z 0 5 console log ready script
fects Single image but only show a small region in the output instead of loading lots of different images style body height 600px margin 0 img padding 0 margin 0 width 100 height 100 style script type text javascript src https d3js org d3 v7 min js script script const w 960 const h 500 const z 20 const x w z const y h z var svg d3 select body append svg attr width w attr height h var imgs svg selectAll image data 0 imgs data d3 range x y enter append svg image attr transform translate attr width z attr height z attr xlink href function d return https picsum photos 200 random d on mouseover mouseover function translate d return translate d x z Math floor d x z function mouseover d this parentNode appendChild this d3 select this style pointer events none transition duration 850 attrTween transform transformTween transition delay 1500 attr transform translate 240 240 scale 0 style fill opacity 0 remove Added so the rotation went through 360 image correct way up also offset translation z 0 5 so the image rotated around the centre instead of the edge function transformTween d var i d3 interpolate 0 360 var s d3 interpolate 1 23 var tx d3 interpolate d x z 240 var ty d3 interpolate Math floor d x z 240 return function t return translate tx t z 0 5 ty t z 0 5 scale s t rotate i t translate z 0 5 z 0 5 console log ready script