Skip to content

Instantly share code, notes, and snippets.

@awakeningspirit

awakeningspirit/index.html

Created August 26, 2024 19:06
Show Gist options
  • Save awakeningspirit/e7deb7a7aa5bfeba2e841110a8e705da to your computer and use it in GitHub Desktop.
Save awakeningspirit/e7deb7a7aa5bfeba2e841110a8e705da to your computer and use it in GitHub Desktop.
Download ZIP
touch grass button
Raw
index.html
<div class="btn tg">
<div id="tg-icon"></div>
</div>
Raw
script.js
var animationTouchGrass = {
"v":"5.7.5","fr":100,"ip":0,"op":210,"w":28,"h":28,"nm":"Comp 1","ddd":0,"metadata":{"backgroundColor":{"r":255,"g":255,"b":255},"lottielabInteractivity":{"__version":"v1","initialState":"State 1","states":{"State 1":{"segment":[0,0],"speed":1,"direction":"forward","loop":false,"on":{"mouseEnter:interactivity-trigger-16fc3b4f-1bd3-4477-9b04-27b9baa4bfbb":{"goTo":"State 2","startAt":"start","duration":0.15,"easing":{"i":{"x":0.8,"y":1},"o":{"x":0.4,"y":0}}}}},"State 2":{"segment":[0,2.1],"speed":1,"direction":"forward","loop":true,"on":{"mouseLeave:interactivity-trigger-16fc3b4f-1bd3-4477-9b04-27b9baa4bfbb":{"goTo":"State 1","startAt":"start","duration":0.15,"easing":{"i":{"x":0.8,"y":1},"o":{"x":0.4,"y":0}}}}}}}},"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Icon","sr":1,"ks":{"p":{"a":0,"k":[14,14],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}},"ao":0,"shapes":[{"ty":"gr","nm":"hand","it":[{"ty":"gr","nm":"Finger 1","it":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"t":0,"s":[{"c":false,"v":[[10.22652721405029,4.654325485229492],[5.709684371948242,4.411433696746826],[2.260602474212646,5.692534923553467],[-0.5161898136138916,4.525851726531982],[-0.201917752623558,3.585160493850708],[5.967581748962402,0.1641440689563751],[8.87728214263916,-0.5885660648345947],[12.70968532562256,-0.5885644555091858]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":40,"s":[{"c":false,"v":[[9.741700172424316,5.307611465454102],[5.801572799682617,4.873761177062988],[3.420565366744995,6.869668960571289],[0.643773078918457,5.702985763549805],[0.9580443501472473,4.762301921844482],[5.263857364654541,0.2910404205322266],[8.173558235168457,-0.4616697430610657],[12.83554172515869,0.05166381224989891]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[{"c":false,"v":[[9.908662796020508,5.475735187530518],[5.709684371948242,4.411433696746826],[2.260602474212646,5.692534923553467],[-0.5161898136138916,4.525851726531982],[-0.201917752623558,3.585160493850708],[5.967581748962402,0.1641440689563751],[8.87728214263916,-0.5885660648345947],[12.70968532562256,-0.5885644555091858]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[{"c":false,"v":[[9.904329299926758,5.480085849761963],[5.709684371948242,4.411433696746826],[2.260602474212646,5.692534923553467],[-0.5161898136138916,4.525851726531982],[-0.201917752623558,3.585160493850708],[5.967581748962402,0.1641440689563751],[8.87728214263916,-0.5885660648345947],[12.86220169067383,0.3165746033191681]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.2183908045977012],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":140,"s":[{"c":false,"v":[[10.22361183166504,4.900527000427246],[5.801572799682617,4.873761177062988],[3.420565366744995,6.869668960571289],[0.643773078918457,5.702985763549805],[0.9580443501472473,4.762301921844482],[5.263857364654541,0.2910404205322266],[8.173558235168457,-0.4616697430610657],[12.70968532562256,-0.5885644555091858]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.3505747126436782],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[{"c":false,"v":[[10.22652721405029,4.654325485229492],[5.709684371948242,4.411433696746826],[2.260602474212646,5.692534923553467],[-0.5161898136138916,4.525851726531982],[-0.201917752623558,3.585160493850708],[5.967581748962402,0.1641440689563751],[8.87728214263916,-0.5885660648345947],[12.70968532562256,-0.5885644555091858]],"i":[[0,0],[0,0],[0,0],[0.4730699956417084,1.060379981994629],[-0.3328900039196014,0.1845899969339371],[0,0],[-1.018100023269653,0],[0,0]],"o":[[0,0],[0,0],[-1.088430047035217,0.4043000042438507],[-0.1550900042057037,-0.3476099967956543],[0,0],[0.8902999758720398,-0.4936800003051758],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2}},{"ty":"st","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"w":{"a":0,"k":2,"ix":2},"lc":1,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[0.08003591746091843,-0.06688070297241211],"ix":2},"a":{"a":0,"k":[6.644830226898193,3.20966100692749],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Thumb 1","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"c":false,"v":[[8.5,2.000289916992188],[6.625499725341797,3.071490287780762],[3.164199829101562,3.633090019226074],[0,3.000289916992188],[0.5447998046875,1.367079734802246],[2.442299842834473,1.960893314389978e-8],[4.5,0.0002899366081692278]],"i":[[0,0],[0,0],[1.18369996547699,0.2368000000715256],[0,0],[0,0],[-0.8607000112533569,-0.000119999996968545],[0,0]],"o":[[0,0],[-1.048099994659424,0.5989000201225281],[0,0],[0,0],[0.2723999917507172,-0.816540002822876],[0,0],[0,0]]}}},{"ty":"st","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"w":{"a":0,"k":2,"ix":2},"lc":3,"lj":2,"ml":4},{"ty":"tr","p":{"a":0,"k":[9.400765419006348,1.645613193511963],"ix":2},"a":{"a":0,"k":[10.75598526000977,1.510738727808817],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":1,"k":[{"t":0,"s":[-12.98378662420084],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[-21.46908706086932],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[-21.46908706086932],"i":{"x":[0.22],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[-12.98378662420084],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"tr","p":{"a":1,"k":[{"t":0,"s":[7,-0.269775390625],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[7.144775390625,1.999992370605469],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[4.115257263183594,1.959442138671875],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[5.615257263183594,0.959442138671875],"i":{"x":[0.2183908045977012],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":140,"s":[11.644775390625,1.499992370605469],"i":{"x":[0.3505747126436782],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[7,-0.269775390625],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"a":{"a":0,"k":[7.144775390625,3.8651123046875],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":1,"k":[{"t":0,"s":[0],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[-6.283521594411989],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[2.716478405588011],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[-16.1969200210622],"i":{"x":[0.2183908045977012],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":140,"s":[-6.416779079216314],"i":{"x":[0.3505747126436782],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[0],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Grass","it":[{"ty":"gr","nm":"Grass 4","it":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"t":25,"s":[{"c":true,"v":[[1.5,5],[0,0],[4,5],[1.5,5]],"i":[[0,0],[0,1.5],[-0.5,-2],[0,0]],"o":[[-1,-1],[1.5,0.5],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[{"c":true,"v":[[1.5,5],[-2.384956359863281,0.8654613494873047],[4,5],[1.5,5]],"i":[[0,0],[0.0725095272064209,2.296135663986206],[-0.5,-2],[0,0]],"o":[[-0.960402250289917,0.1676979064941406],[4.326406478881836,1.45019006729126],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[{"c":true,"v":[[1.5,5],[-2.16939377784729,0.2764911651611328],[4,5],[1.5,5]],"i":[[0,0],[0.0725095272064209,2.296135663986206],[-0.5,-2],[0,0]],"o":[[-0.960402250289917,0.1676979064941406],[3.428692817687988,2.875334978103638],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":70,"s":[{"c":true,"v":[[1.5,5],[-2.16939377784729,0.2764911651611328],[4,5],[1.5,5]],"i":[[0,0],[0.0725095272064209,2.296135663986206],[-0.5,-2],[0,0]],"o":[[-0.960402250289917,0.1676979064941406],[3.428692817687988,2.875334978103638],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[{"c":true,"v":[[1.5,5],[-2.463269233703613,2],[4,5],[1.5,5]],"i":[[0,0],[2.030208587646484,1.74462103843689],[0,-1.274402856826782],[0,0]],"o":[[-2.884291172027588,0],[3.721832513809204,-1.010728120803833],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":102,"s":[{"c":true,"v":[[1.5,5],[-0.9215285657019832,1.187758840753184],[4,5],[1.5,5]],"i":[[0,0],[0.8045580288223988,1.651556829443469],[-0.4534893285488599,-1.48390099567201],[0,0]],"o":[[-2.694116115570068,0.1012630462646484],[2.442617433153267,-0.122784305734029],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":130,"s":[{"c":true,"v":[[1.5,5],[2.398796081542969,-0.5615005493164062],[4,5],[1.5,5]],"i":[[0,0],[-1.835028409957886,1.451131820678711],[-1.43013334274292,-1.935080528259277],[0,0]],"o":[[-1,-1],[-0.3123266696929932,1.789509892463684],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":160,"s":[{"c":true,"v":[[1.5,5],[-0.3662503063678741,0.2527062296867371],[4,5],[1.5,5]],"i":[[0,0],[0.5138038396835327,1.512868285179138],[-0.5,-2],[0,0]],"o":[[-1,-1],[2.055219173431396,0.485258162021637],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[{"c":true,"v":[[1.5,5],[0,0],[4,5],[1.5,5]],"i":[[0,0],[0,1.5],[-0.5,-2],[0,0]],"o":[[-1,-1],[1.5,0.5],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2}},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-2.20245361328125,-0.6244964599609375],"ix":2},"a":{"a":0,"k":[2,2.5],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Grass 3","it":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"t":20,"s":[{"c":true,"v":[[2.5,4],[0,0],[5,4],[2.5,4]],"i":[[0,0],[1.339907050132751,1.047393202781677],[0,-2],[0,0]],"o":[[0,-1.5],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[{"c":true,"v":[[2.5,4],[1.4210854715202e-14,2.067497253417969],[5,4],[2.5,4]],"i":[[0,0],[1.464391589164734,0.6375222206115723],[-0.01286745071411133,-1.268603801727295],[0,0]],"o":[[-0.2351224422454834,-0.3655648231506348],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":60,"s":[{"c":true,"v":[[2.5,4],[1.4210854715202e-14,0.4912941753864288],[5,4],[2.5,4]],"i":[[0,0],[1.339907050132751,1.047393202781677],[0,-2],[0,0]],"o":[[0.0177922248840332,-0.6907410621643066],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":80,"s":[{"c":true,"v":[[2.5,4],[1.4210854715202e-14,2.067497253417969],[5,4],[2.5,4]],"i":[[0,0],[1.464391589164734,0.6375222206115723],[-0.01286745071411133,-1.268603801727295],[0,0]],"o":[[-0.1989917755126953,-0.3113689422607422],[1.957766771316528,-0.4925106763839722],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":102,"s":[{"c":true,"v":[[2.5,4],[-0.01199740916490555,2.753461837768555],[5,4],[2.5,4]],"i":[[0,0],[0.9942395687103271,1.170016765594482],[-0.01889228820800781,-2.202901363372803],[0,0]],"o":[[-0.488037109375,0.1221990585327148],[2.456753969192505,0.4585762023925781],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":140,"s":[{"c":true,"v":[[2.5,4],[2.216698408126831,0.1731422990560532],[5,4],[2.5,4]],"i":[[0,0],[-0.4900085926055908,1.099170804023743],[-1.945982694625854,-1.760850429534912],[0,0]],"o":[[-1.541561841964722,-1.381478309631348],[0.23260498046875,0.9546481370925903],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":210,"s":[{"c":true,"v":[[2.5,4],[0,0],[5,4],[2.5,4]],"i":[[0,0],[1.339907050132751,1.047393202781677],[0,-2],[0,0]],"o":[[0,-1.5],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2}},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[2.29754638671875,-0.1244964599609375],"ix":2},"a":{"a":0,"k":[2.5,2],"ix":2},"s":{"a":0,"k":[100,-100],"ix":2},"r":{"a":0,"k":180,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Grass 2","it":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"t":25,"s":[{"c":true,"v":[[2.5,3],[0,0],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[{"c":true,"v":[[2.5,3],[-0.0190582275390625,0.2574687004089355],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.164124727249146,-2.238023996353149],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[{"c":true,"v":[[2.5,3],[1.4210854715202e-14,-0.356714129447937],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":80,"s":[{"c":true,"v":[[2.5,3],[1.4210854715202e-14,-0.356714129447937],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":90,"s":[{"c":true,"v":[[2.5,3],[0.2121104747056961,-0.076080322265625],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.1995818614959717,-0.6577916145324707],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":102,"s":[{"c":true,"v":[[2.5,3],[-0.6099797487258911,1.4210854715202e-14],[5,3],[2.5,3]],"i":[[0,0],[1.612940430641174,0.772501528263092],[-1.723730564117432,-2.6646728515625],[0,0]],"o":[[-0.3895289897918701,-0.8868305683135986],[1.884638786315918,0.1414258778095245],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":130,"s":[{"c":true,"v":[[2.5,3],[-0.1919804662466049,1.608665466308594],[5,3],[2.5,3]],"i":[[0,0],[1.719550013542175,-0.1357990503311157],[-1.752875566482544,-2.693817853927612],[0,0]],"o":[[-0.535253643989563,-0.9742653369903564],[1.253231167793274,-1.127613544464111],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":160,"s":[{"c":true,"v":[[2.5,3],[0.7510935068130493,-0.00031280517578125],[5,3],[2.5,3]],"i":[[0,0],[1.090896606445312,0.4252181053161621],[-0.7515115737915039,-2.061983585357666],[0,0]],"o":[[-0.02935409545898438,-1.420794606208801],[2.706728935241699,0],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[{"c":true,"v":[[2.5,3],[0,0],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2}},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1},{"ty":"tr","p":{"a":0,"k":[5.29754638671875,0.3755035400390625],"ix":2},"a":{"a":0,"k":[2.5,1.5],"ix":2},"s":{"a":0,"k":[100,-100],"ix":2},"r":{"a":0,"k":180,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Grass 1","it":[{"ty":"sh","d":1,"ks":{"a":1,"k":[{"t":33,"s":[{"c":true,"v":[[2.5,3],[0,0],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":40,"s":[{"c":true,"v":[[2.5,3],[0,1.06749415397644],[5,3],[2.5,3]],"i":[[0,0],[1.18768310546875,0.9146854877471924],[-2.025483369827271,-1.166720032691956],[0,0]],"o":[[-0.3763563632965088,-0.7412834167480469],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":60,"s":[{"c":true,"v":[[2.5,3],[0,0],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":80,"s":[{"c":true,"v":[[2.5,3],[0.3542651832103729,0.0820537880063057],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":102,"s":[{"c":true,"v":[[2.5,3],[3.210914611816406,-0.3891158103942871],[5,3],[2.5,3]],"i":[[0,0],[0.6583883762359619,1.896758198738098],[-0.1538405418395996,-1.386937737464905],[0,0]],"o":[[0.5244760513305664,-0.5871844291687012],[1.251193046569824,1.858157157897949],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":140,"s":[{"c":true,"v":[[2.5,3],[1.231922673746907,0.435795378251329],[5,3],[2.5,3]],"i":[[0,0],[0.4077221487165812,1.338502838812773],[-1.797523736953735,-1.229263067245483],[0,0]],"o":[[-0.4990639982823148,-0.9386863731965592],[1.494475164224503,1.127868033994409],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}},{"t":160,"s":[{"c":true,"v":[[2.5,3],[0,0.9493026733398438],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-0.6713728904724121,-1.332676529884338],[0,0]],"o":[[-0.4422101974487305,-0.719550609588623],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.8],"y":[1]},"o":{"x":[0.4],"y":[0]}},{"t":210,"s":[{"c":true,"v":[[2.5,3],[0,0],[5,3],[2.5,3]],"i":[[0,0],[1.339907050132751,1.047393202781677],[-1.244591355323792,-1.971679210662842],[0,0]],"o":[[-0.5903953909873962,-1.290711641311646],[2.638767242431641,0.3878931999206543],[0,0],[0,0]]}],"i":{"x":[0.75],"y":[0.75]},"o":{"x":[0.25],"y":[0.25]}}],"ix":2}},{"ty":"fl","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-5.70245361328125,0.3755035400390625],"ix":2},"a":{"a":0,"k":[2.5,1.5],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"tr","p":{"a":0,"k":[0.20245361328125,5.186664581298828],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,101.694188298176],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]},{"ty":"gr","nm":"Ground","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"c":false,"v":[[0,0],[16,0]],"i":[[0,0],[0,0]],"o":[[0,0],[0,0]]}}},{"ty":"st","c":{"a":0,"k":[0,0,0],"ix":2},"o":{"a":0,"k":100,"ix":2},"w":{"a":0,"k":2,"ix":2},"lc":3,"lj":1,"ml":4},{"ty":"tr","p":{"a":0,"k":[0,7.999992370605469],"ix":2},"a":{"a":0,"k":[8,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":211,"st":0,"bm":0,"cl":"interactivity-trigger-16fc3b4f-1bd3-4477-9b04-27b9baa4bfbb"}],"markers":[]
};
var animationTG = lottie.loadAnimation({
container: document.getElementById('tg-icon'),
renderer: 'svg',
loop: false,
autoplay: false,
animationData: animationTouchGrass
});
var btnTG = document.querySelector('.btn.tg');
btnTG.addEventListener('click', function() {
animationTG.goToAndPlay(0, true);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
Raw
style.sass
body
min-height: 100vh
display: flex
justify-content: center
align-items: center
*
box-sizing: border-box
.btn
color: black
padding: 12px
cursor: pointer
border-radius: 50%
transition: all .2s ease
-webkit-tap-highlight-color: transparent
//transform: scale(2)
&:hover
background-color: rgba(#000,.04)
div
width: 56px
height: 56px
transform: translate3d(0,0,0)
svg path
margin: 0 auto
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment