Documentation for Motion Design

Date: March 5th. 2020

"Drowsy" Button

My idea comes from the opposite words "hot" and "cold". I thought I could do a small person who interacts with his/her quilt. I drew the graphic from the AI at first. Separated the layers and uploaded into the AE.

{"items":["64fe0c_bdae18d48256423385b4e9ff242c286b~mv2.png","64fe0c_ec906bbed5ec45fb9cb83e90e0ba596a~mv2.png","64fe0c_495db40f582b49a3bbf8232468b9e68f~mv2.png","64fe0c_c2a65c30d14641c3bc922c813c82c8d7~mv2.png","64fe0c_93f28df610754853a456b8772fba12e3~mv2.png","64fe0c_0cd7b9e0427f4d4c9f906d29b8e8fd2c~mv2.png","64fe0c_8f859df26d9d43008ee1d3a49459ff47~mv2.png","64fe0c_16a61be364664653910ffaa7cd402311~mv2.png","64fe0c_f0d8b19adb2a498186613a27a730ff74~mv2.png"],"styles":{"galleryType":"Strips","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fill","cubeRatio":"100%/100%","isVertical":false,"gallerySize":300,"collageDensity":0.8,"groupTypes":"1","oneRow":true,"imageMargin":0,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":true,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":0,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":1,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":0,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"useCustomButton":false,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryHorizontalAlign":"center","galleryTextAlign":"center","galleryVerticalAlign":"center","scrollSnap":true,"itemClick":"link","fullscreen":false,"allowSocial":false,"allowDownload":false,"allowTitle":true,"allowDescription":false,"loveButton":false,"loveCounter":false,"videoPlay":"onClick","scrollAnimation":"NO_EFFECT","scrollDirection":1,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowTitleExpand":true,"allowDescriptionExpand":true,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","calculateTextBoxHeightMode":"AUTOMATIC","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"textsVerticalPadding":0,"textsHorizontalPadding":0,"titleDescriptionSpace":6,"customButtonText":"","customButtonBorderWidth":1,"customButtonBorderRadius":0,"loadMoreButtonText":"","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":"1","videoLoop":true,"galleryLayout":3,"gallerySizeType":"px","gallerySizePx":300,"allowHover":true,"mobileSwipeAnimation":"NO_EFFECT","gotStyleParams":true,"showVideoPlayButton":true,"selectedLayout":"3|bottom|1|fill|false|1|true","layoutsVersion":2,"selectedLayoutV2":3,"isSlideshowFont":false,"externalInfoHeight":0,"externalInfoWidth":0},"container":{"galleryWidth":2560,"galleryHeight":1320,"scrollBase":0,"height":null,"width":null}}

Then uploaded the json file into the P5.JS. Link

Try this button: