[{"_1":2,"_182":-5,"_183":-5},"loaderData",{"_3":4,"_61":62,"_181":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_57":58,"_59":60},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","sb_publishable_Psom5r5hvV9Glvzv4s3oOQ_2b_HevU-","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","ACTIVITY_DIRECT_PAGEVIEW","on","authUser","user","snapshotData",{"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":-5,"_41":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","nextUpExpanded","plan","balances","rewards","loadedAt",1793722060106,"origins",{"_49":50,"_51":52,"_53":54,"_55":56},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile",false,"theme","auto","slug",{"_63":64,"_65":66,"_123":124,"_143":144,"_173":174,"_175":-5,"_176":177,"_178":179},"version","1","project",{"_67":65,"_68":69,"_70":71,"_72":73,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":100,"_101":102,"_61":111,"_112":58,"_113":100,"_114":58,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":-5,"_121":-5,"_122":58},"_type","id","wesdy3zh5ozb0z6zcg20","created_at","2024-12-09T01:29:20.457Z","created_by",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"ee9ad05a-7bfe-4adb-a816-54f90e1fd0f4","username","JimBiscuit","2024-11-12T23:28:50.199Z","avatar_url","https://avatars.websim.ai/ee9ad05a-7bfe-4adb-a816-54f90e1fd0f4/YuEBlDlW4ZIjroe2x.webp","discord_username","complexcore_kf","discord_id","1195603669857599542","is_admin","updated_at","2024-12-09T01:30:50.519Z","title","Vue.js Transitions Demosc (credits to the og creator! )","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_103":104,"_105":69,"_106":107,"_108":109,"_110":109},"~type","project_stats","project_id","views",2,"likes",0,"comments","vue-js-transitions-demosc","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_67":123,"_68":125,"_63":94,"_70":126,"_127":-5,"_96":-5,"_128":-5,"_129":-5,"_72":130,"_131":132,"_105":69,"_85":133,"_98":-5,"_101":134,"_136":58,"_137":138,"_139":-5,"_140":-5,"_141":142},"0193a909-03d4-77ae-bbb7-0addfcbf7568","2024-12-09T01:29:20.596Z","visited_at","parent_revision_version","parent_revision_project_id",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"meta",{"_63":64},"2024-12-09T01:30:50.601Z",{"_135":109},"multiplayer_count","draft","site_id","eeiwrsv5tzFhji6RH","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/0193a909-8b72-7fa1-9e81-8a01eb6fe0e4","site",{"_67":143,"_68":138,"_96":-5,"_70":145,"_146":147,"_148":149,"_150":151,"_87":156,"_157":158,"_159":160,"_165":-5,"_166":167,"_168":169,"_98":-5,"_170":-5,"_171":172},"2024-12-09T01:29:21.756Z","state","done","model","sonnet","lore",{"_63":94,"_152":153,"_154":58,"_155":58},"attachments",[],"enableApi","enableDB","Vue.js Transitions Demosc","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"prompt",{"_161":162,"_163":164},"type","plaintext","text","\n\n

\n \n \n

\n\n\n\n\n\n\n\n\n\n$color1: #461467;\n$color2: #ffba57;\n$color3: lighten(#ff7655, 20%);\n$color4: lighten(#00aca0, 10%);\n$color5: #8ed3c9;\n$color6: darken(#fcf5d8, 20%);\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background: #202020;\n font-size: 62.5%;\n}\n\n// App\n#app {\n overflow: hidden;\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(76,76,76,1);\n background: -moz-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);\n background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(36%, rgba(43,43,43,0.74)), color-stop(71%, rgba(28,28,28,0.5)), color-stop(100%, rgba(19,19,19,0.29)));\n background: -webkit-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);\n background: -o-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);\n background: -ms-linear-gradient(-45deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);\n background: linear-gradient(135deg, rgba(76,76,76,1) 0%, rgba(43,43,43,0.74) 36%, rgba(28,28,28,0.5) 71%, rgba(19,19,19,0.29) 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );\n color: #fff;\n}\n\n// Controls\n.controls {\n position: absolute;\n left: 50%;\n bottom: 40px;\n transform: translate(-50%, 0);\n width: 100%;\n margin-top: 30px;\n text-align: center;\n padding: 0;\n \n li {\n opacity: 0.6;\n cursor: pointer;\n overflow: hidden;\n display: inline-block;\n height: 30px;\n margin: 0 10px;\n padding: 0 30px;\n border-radius: 10px;\n font: .8rem/30px Arial, sans-serif;\n font-family: 'Ubuntu', Helvetica, Arial, sans-serif;\n background: #505050;\n \n &.active {\n background: lighten(#505050, 40%);\n }\n }\n}\n\n// Page\n.page {\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: #c0c0c0;\n \n .center {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n font-size: 3rem;\n text-align: center;\n }\n \n h1 {\n width: 100%;\n margin: 0;\n padding: 0;\n font-family: 'Ubuntu', Helvetica, Arial, sans-serif;\n font-size: 2.8rem;\n text-transform: capitalize;\n }\n \n p {\n font-family: 'Vollkorn', Georgia, Times, serif;\n font-size: 1.1rem;\n }\n \n a {\n transition: color 200ms ease-out;\n color: darken(rgba(#fff, .8), 40%);\n \n &:hover {\n color: darken(rgba(#fff, .8), 60%);\n }\n }\n}\n\n// Active animation\n.active-animation {\n position: absolute;\n top: 30px;\n left: 50%;\n transform: translate(-50%, 0);\n}\n\n// Page styles\n.fade {\n background: $color1;\n}\n\n.slide {\n background: $color2;\n}\n\n.zoom {\n background: $color3;\n}\n\n.flipX {\n background: $color4;\n}\n\n.flipY {\n background: $color5;\n}\n\n.slideUp {\n background: $color6;\n}\n\n// State\nconst state = {\n animations: ['fade', 'slide', 'slideUp', 'zoom', 'flipX', 'flipY'],\n view: 'slide'\n}\n\n// Controls\nconst controls = Vue.component('controls', {\n template: '#controls',\n data: state,\n methods: {\n setView(animation) {\n state.view = animation\n }\n }\n})\n\n// Transitions\nconst fade = Vue.component('fade', {\n template: '#page',\n methods: {\n enter(el, done) {\n TweenMax.fromTo(el, 1, {\n autoAlpha: 0,\n scale: 1.5,\n }, {\n autoAlpha: 1,\n scale: 1,\n transformOrigin: '50% 50%',\n ease: Power4.easeOut,\n onComplete: done\n });\n },\n leave(el, done) {\n TweenMax.fromTo(el, 1, {\n autoAlpha: 1,\n scale: 1,\n }, {\n autoAlpha: 0,\n scale: 0.8,\n ease: Power4.easeOut,\n onComplete: done\n });\n }\n }\n})\n\nconst slide = Vue.component('slide', {\n template: '#page',\n methods: {\n enter(el, done) {\n const tl = new TimelineMax({\n onComplete: done\n })\n \n tl.set(el, {\n x: window.innerWidth * 1.5,\n scale: 0.8,\n transformOrigin: '50% 50%'\n })\n \n tl.to(el, 0.5, {\n x: 0,\n ease: Power4.easeOut\n });\n \n tl.to(el, 1, {\n scale: 1,\n ease: Power4.easeOut\n });\n },\n leave(el, done) {\n TweenMax.fromTo(el, 1, {\n autoAlpha: 1\n }, {\n autoAlpha: 0,\n ease: Power4.easeOut,\n onComplete: done\n });\n } \n }\n})\n\nconst slideUp = Vue.component('slideUp', {\n template: '#page',\n methods: {\n enter(el, done) {\n const tl = new TimelineMax({\n onComplete: done\n })\n \n tl.set(el, {\n y: window.innerWidth * 1.5,\n scale: 0.8,\n transformOrigin: '50% 50%'\n })\n \n tl.to(el, 0.5, {\n y: 0,\n ease: Power4.easeOut\n });\n \n tl.to(el, 1, {\n scale: 1,\n ease: Power4.easeOut\n });\n },\n leave(el, done) {\n TweenMax.to(el, 1, {\n y: window.innerHeight * -1.5,\n ease: Power4.easeOut,\n onComplete: done\n });\n } \n }\n})\n\nconst zoom = Vue.component('zoom', {\n template: '#page',\n methods: {\n enter(el, done) {\n const tl = new TimelineMax({\n onComplete: done\n })\n \n tl.set(el, {\n autoAlpha: 0,\n scale: 2,\n transformOrigin: '50% 50%'\n })\n \n tl.to(el, 1, {\n autoAlpha: 1,\n scale: 1,\n ease: Power4.easeOut\n })\n },\n leave(el, done) {\n TweenMax.to(el, 1, {\n scale: 0,\n ease: Power4.easeOut,\n onComplete: done\n });\n } \n }\n})\n\nconst flipX = Vue.component('flipX', {\n template: '#page',\n methods: {\n enter(el, done) {\n const tl = new TimelineMax({\n onComplete: done\n })\n \n tl.set(el, {\n autoAlpha: 0,\n rotationX: 90,\n transformOrigin: '50% 50%'\n })\n \n tl.to(el, 1, {\n autoAlpha: 1,\n rotationX: 0,\n ease: Power4.easeOut\n })\n },\n leave(el, done) {\n TweenMax.to(el, 1, {\n scale: 0,\n ease: Power4.easeOut,\n onComplete: done\n });\n } \n }\n})\n\nconst flipY = Vue.component('flipY', {\n template: '#page',\n methods: {\n enter(el, done) {\n const tl = new TimelineMax({\n onComplete: done\n })\n \n tl.set(el, {\n autoAlpha: 0,\n rotationY: 90,\n transformOrigin: '50% 50%'\n })\n \n tl.to(el, 1, {\n autoAlpha: 1,\n rotationY: 0,\n ease: Power4.easeOut\n })\n },\n leave(el, done) {\n TweenMax.to(el, 1, {\n scale: 0,\n ease: Power4.easeOut,\n onComplete: done\n });\n } \n }\n})\n\n// App\nconst app = new Vue({\n el: '#app',\n data() {\n return state\n }\n})","url","link_url","/p/wesdy3zh5ozb0z6zcg20","versioned_link_url","/p/wesdy3zh5ozb0z6zcg20/1","yapping","page_description","This page showcases various transition animations using Vue.js and GSAP (GreenSock Animation Platform). It allows users to switch between different…","cursor","eyJpZCI6Indlc2R5M3poNW96YjB6NnpjZzIwIn0","token","included",[],"about",{"_180":-5},"parent","routes/browser/layout","actionData","errors"]

{{ state.view }}