{"id":2,"date":"2024-08-26T09:34:46","date_gmt":"2024-08-26T09:34:46","guid":{"rendered":"https:\/\/lenis.alexanderkoch.at\/?page_id=2"},"modified":"2024-09-10T12:47:25","modified_gmt":"2024-09-10T12:47:25","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/lenis.alexanderkoch.at\/","title":{"rendered":"Sample Page"},"content":{"rendered":"[vc_row type=&#8220;in_container&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; scene_position=&#8220;center&#8220; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;bottom&#8220; bg_image_animation=&#8220;none&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220; column_border_radius=&#8220;none&#8220; column_link_target=&#8220;_self&#8220; column_position=&#8220;default&#8220; gradient_direction=&#8220;left_to_right&#8220; overlay_strength=&#8220;0.3&#8243; width=&#8220;1\/1&#8243; tablet_width_inherit=&#8220;default&#8220; animation_type=&#8220;default&#8220; bg_image_animation=&#8220;none&#8220; border_type=&#8220;simple&#8220; column_border_width=&#8220;none&#8220; column_border_style=&#8220;solid&#8220;][vc_column_text]This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8216; caught in the rain.)<\/p><\/blockquote>\r\n<p>&#8230;or something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\r\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/lenis.alexanderkoch.at\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\r\n[\/vc_column_text][vc_column_text css=&#8220;.vc_custom_1725025503982{margin-bottom: 0px !important;}&#8220; text_direction=&#8220;default&#8220;]\r\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8216; caught in the rain.)<\/p><\/blockquote>\r\n<p>&#8230;or something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\r\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/lenis.alexanderkoch.at\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8220;full_width_content&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; bg_color=&#8220;#7a0202&#8243; scene_position=&#8220;center&#8220; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; class=&#8220;over_flow&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;bottom&#8220; bg_image_animation=&#8220;none&#8220; gradient_type=&#8220;default&#8220; shape_type=&#8220;&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220; column_border_radius=&#8220;none&#8220; column_link_target=&#8220;_self&#8220; column_position=&#8220;default&#8220; gradient_direction=&#8220;left_to_right&#8220; overlay_strength=&#8220;0.3&#8243; width=&#8220;1\/1&#8243; tablet_width_inherit=&#8220;default&#8220; animation_type=&#8220;default&#8220; bg_image_animation=&#8220;none&#8220; border_type=&#8220;simple&#8220; column_border_width=&#8220;none&#8220; column_border_style=&#8220;solid&#8220;]\t<style type=\"text\/css\">\n\t\t.over_flow{overflow: hidden;}\n\t.text-zoom {\n\t\tposition: relative;\n\t}\n\t.zoom-in {\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\t.zoom-in h2 {\n\t\ttext-align: center;\n\t\tfont-weight: 900;\n\t\tline-height: 0.8;\n\t\tcolor:#ffffff;\n\t}\t\n\t<\/style>\n\t<div class=\"text-zoom \">\n\t\t<section class=\"zoom-in zQlPISTxAZ\" id=\"zoom-in\">\n\t\t\t<h2>RETER<\/h2>\n\t\t<\/section>\n\t<\/div>\n\t<script src=\"https:\/\/unpkg.co\/gsap@3\/dist\/gsap.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollTrigger.min.js\"><\/script>\n\t<script>\n\t\tconst { innerHeight } = window;\n\t\tlet an = gsap.timeline({\n\t\t\t\/\/'--progress1': 1,\n\t\t\tsmoothOrigin: true,\n\t\t\tstagger: 0.25,\n\t\t\tscrollTrigger: {\n\t\t\t\ttrigger: \".zQlPISTxAZ.zoom-in\",\n\t\t\t\tpin: true,\n\t\t\t\tstart: \"top top\",\n\t\t\t\tend: \"+=3000\",\n\t\t\t\tscrub: 1\n\t\t\t}\n\t\t});\n\t\n\t\tan.fromTo('.zQlPISTxAZ.zoom-in h2', {\n\t\t\topacity: 0.5,\n\t\t\tstagger: 0.25,\n\t\t},\n\t\t{\n\t\t\t\/\/ease: \"sine.out\",\n\t\t\tscale: 330,\n\t\t\tease: \"sine.inOut\",\n\t\t\topacity: 1\n\t\t});\n\t<\/script>\n\t[\/vc_column][\/vc_row][vc_row type=&#8220;in_container&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; scene_position=&#8220;center&#8220; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;bottom&#8220; bg_image_animation=&#8220;none&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220; column_border_radius=&#8220;none&#8220; column_link_target=&#8220;_self&#8220; column_position=&#8220;default&#8220; gradient_direction=&#8220;left_to_right&#8220; overlay_strength=&#8220;0.3&#8243; width=&#8220;1\/1&#8243; tablet_width_inherit=&#8220;default&#8220; animation_type=&#8220;default&#8220; bg_image_animation=&#8220;none&#8220; border_type=&#8220;simple&#8220; column_border_width=&#8220;none&#8220; column_border_style=&#8220;solid&#8220;][vc_column_text css=&#8220;.vc_custom_1725025503982{margin-bottom: 0px !important;}&#8220; text_direction=&#8220;default&#8220;]\r\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8216; caught in the rain.)<\/p><\/blockquote>\r\n<p>&#8230;or something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\r\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/lenis.alexanderkoch.at\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\r\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8220;full_width_background&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; bg_color=&#8220;#3452ff&#8220; scene_position=&#8220;center&#8220; top_padding=&#8220;150&#8243; bottom_padding=&#8220;150&#8243; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;both&#8220; bg_image_animation=&#8220;none&#8220; gradient_type=&#8220;default&#8220; shape_type=&#8220;fan&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220; column_border_radius=&#8220;none&#8220; column_link_target=&#8220;_self&#8220; column_position=&#8220;default&#8220; gradient_direction=&#8220;left_to_right&#8220; overlay_strength=&#8220;0.3&#8243; width=&#8220;1\/1&#8243; tablet_width_inherit=&#8220;default&#8220; animation_type=&#8220;default&#8220; bg_image_animation=&#8220;none&#8220; border_type=&#8220;simple&#8220; column_border_width=&#8220;none&#8220; column_border_style=&#8220;solid&#8220;]\t<style type=\"text\/css\">\n\t\t@media (max-width: 799px) {\n\t\t\t.horizontal__content {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\n\t\t\t.horizontal__item {\n\t\t\t\tborder: 1px solid #000000;\n\t\t\t\tbackground-color:#ffffff;\n\t\t\t\theight: 400px;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay:block;\n\t\t\t\tpadding: 1.5em;\n\t\t\t\tmargin-bottom: 30px;\n\t\t\t}\n\t\t}\n\t\t@media (min-width: 800px) {\n\t\t\t.horizontal__content {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\t\t\t.horizontal__item {\n\t\t\t\tborder: 1px solid #000000;\n\t\t\t\tbackground-color:#ffffff;\n\t\t\t\theight: 400px;\n\t\t\t\twidth: 400px;\n\t\t\t\tdisplay:block;\n\t\t\t\tpadding: 1.5em;\n\t\t\t}\t\n\t\t\t.horizontal__item:not(:last-child) {\n\t\t\t\tmargin-right: 120px;\n\t\t\t}\n\t\t}\n\t<\/style>\n\t<section id=\"horizontal\" class=\"horizontal hello\">\n        <div class=\"pin-wrap\">\n            <div class=\"horizontal__content\">\n\t\t\t\t<div class=\"horizontal__item hi-\">\r\n<h2>1<\/h2>\r\n<\/div><div class=\"horizontal__item hi-\">\r\n<h2>2<\/h2>\r\n<\/div><div class=\"horizontal__item hi-\">\r\n<h2>3<\/h2>\r\n<\/div><div class=\"horizontal__item hi-\">\r\n<h2>4<\/h2>\r\n<\/div><div class=\"horizontal__item hi-\">\r\n<h2>5<\/h2>\r\n<\/div>                            <\/div>\n        <\/div>\n    <\/section>\n\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.3\/gsap.min.js\"><\/script>\n    <script src=\"https:\/\/assets.codepen.io\/16327\/ScrollTrigger.min.js\"><\/script>\n    <!--<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/studio-freight\/lenis@latest\/bundled\/lenis.js\"><\/script>-->\n\t<script>\n\t\tif(window.innerWidth >= 800){\n\t\t\t\/\/const section_2 = document.getElementById(\"horizontal\");\n\t\t\tlet box_items = gsap.utils.toArray(\".horizontal__item\");\n\n\t\t\tlet pinWrap = document.querySelector(\".horizontal__content\");\n\t\t\tlet pinWrapWidth = pinWrap.offsetWidth;\n\n\t\t\t\/\/jQuery('#horizontal').offset().top - jQuery('.horizontal__content').height(),\n\t\t\tlet timeln1 = gsap.timeline({\n\t\t\t\tscrollTrigger: {\n\t\t\t\t\ttrigger: \".horizontal\",\n\t\t\t\t\tpin: true,\n\t\t\t\t\t\/\/pinSpacing: true,\n\t\t\t\t\t\/\/start: 953,\n\t\t\t\t\tstart: jQuery('.horizontal').offset().top - (window.innerHeight - jQuery('.horizontal__content').height())\/2 - 30,\n\t\t\t\t\tend: \"+=4000\",\/\/pinWrapWidth,\n\t\t\t\t\tscrub: 1\n\t\t\t\t}\n\t\t\t});\n\n\t\t\ttimeln1.fromTo(box_items, {\n\t\t\t\txPercent: 100,\n\t\t\t\tyPercent: 0,\n\t\t\t\topacity: 1\n\t\t\t},\n\t\t\t{\n\t\t\t\txPercent: -100 * (box_items.length - 1),\n\t\t\t\tyPercent: 0,\n\t\t\t\tease: \"sine.out\",\n\t\t\t\topacity: 1\n\t\t\t});\n\t\t}else{\n\t\t\t\n\t\t}\n\n\t\t\/*gsap.from(box_items, {\n\t\t  xPercent: 100,\n\t\t});\n\t\t\n\t\tgsap.to(box_items, {\n\t\t  xPercent: -100 * (box_items.length - 1),\n\t\t  ease: \"sine.out\",\n\t\t  scrollTrigger: {\n\t\t\ttrigger: section_2,\n\t\t\tpin: true,\n\t\t\tscrub: 1,\n\t\t\t\/\/snap: 1 \/ (box_items.length - 1),\n\t\t\t\/\/pinSpacing: true,\n\t\t\t\/\/start: \"top-=120px top\",\n            \/\/end: \"bottom top\",\n\t\t\tend: \"+=2000\",\n\t\t\t\/\/end: \"+=\" + section_2.offsetWidth\n\t\t  }\n\t\t});*\/\n\t<\/script>\n\t[\/vc_column][\/vc_row][vc_row type=&#8220;in_container&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; scene_position=&#8220;center&#8220; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;bottom&#8220; bg_image_animation=&#8220;none&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220; column_border_radius=&#8220;none&#8220; column_link_target=&#8220;_self&#8220; column_position=&#8220;default&#8220; gradient_direction=&#8220;left_to_right&#8220; overlay_strength=&#8220;0.3&#8243; width=&#8220;1\/1&#8243; tablet_width_inherit=&#8220;default&#8220; animation_type=&#8220;default&#8220; bg_image_animation=&#8220;none&#8220; border_type=&#8220;simple&#8220; column_border_width=&#8220;none&#8220; column_border_style=&#8220;solid&#8220;][vc_column_text]This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin&#8216; caught in the rain.)<\/p><\/blockquote>\r\n<p>&#8230;or something like this:<\/p>\r\n<p>&nbsp;<\/p>\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p><\/blockquote>\r\n<p>As a new WordPress user, you should go to <a href=\"https:\/\/lenis.alexanderkoch.at\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!<\/p>\r\n[\/vc_column_text]\t<style type=\"text\/css\">\n\t\t.sdfsd.cards {\n\t\t\theight: 660px;\n\t\t\twidth: 100%;\n\t\t\tmargin: auto;\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: flex-start;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.sdfsd.cards .card {\n\t\t\tposition: absolute;\n\t\t\theight: 420px;\n\t\t\tdisplay: block;\n\t\t\tbackground-color: rgba(255,255,255,0.8);\n\t\t\t-webkit-backdrop-filter: blur(5px);\n\t\t\tbackdrop-filter: blur(5px);\n\t\t\tborder:1px solid #333333;\n\t\t\tpadding: 1.5em;\n\t\t}\n\t\t\n\t\t.sdfsd.cards .card {width: 100%;}\n\t\t.sdfsd.cards .card:first-child {\n\t\t\tleft: 0px;\n\t\t\ttop: 0px;\n\t\t}\n\t\t.sdfsd.cards .card:nth-child(2) {\n\t\t\tleft: 0;\n\t\t\ttop: 50px;\n\t\t}\n\t\t\t\t\t.sdfsd.cards .card:nth-child(3) {\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 100px;\n\t\t\t}\n\t\t\t\t\t.sdfsd.cards .card:nth-child(4) {\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 150px;\n\t\t\t}\n\t\t\t\t\t.sdfsd.cards .card:nth-child(5) {\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 200px;\n\t\t\t}\n\t\t\t\t\t.sdfsd.cards .card:nth-child(6) {\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 250px;\n\t\t\t}\n\t\t\t\t\n\t\t@media (min-width: 800px) {\n\t\t\t.sdfsd.cards .card {width: 35%;}\n\t\t\t.sdfsd.cards .card:first-child {\n\t\t\t\tleft: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t}\n\t\t\t.sdfsd.cards .card:nth-child(2) {\n\t\t\t\tleft: 110px;\n\t\t\t\ttop: 50px;\n\t\t\t}\n\t\t\t\t\t\t\t.sdfsd.cards .card:nth-child(3) {\n\t\t\t\t\tleft: 220px;\n\t\t\t\t\ttop: 100px;\n\t\t\t\t}\n\t\t\t\t\t\t\t.sdfsd.cards .card:nth-child(4) {\n\t\t\t\t\tleft: 330px;\n\t\t\t\t\ttop: 150px;\n\t\t\t\t}\n\t\t\t\t\t\t\t.sdfsd.cards .card:nth-child(5) {\n\t\t\t\t\tleft: 440px;\n\t\t\t\t\ttop: 200px;\n\t\t\t\t}\n\t\t\t\t\t\t\t.sdfsd.cards .card:nth-child(6) {\n\t\t\t\t\tleft: 550px;\n\t\t\t\t\ttop: 250px;\n\t\t\t\t}\n\t\t\t\t\t}\n\t\t\n\t\t\n\t<\/style>\n\t<div class=\"cards sdfsd\">\n\t\t<div class=\"card card-1 \">\r\n<h2>01<\/h2>\r\n<\/div><div class=\"card card-2 \">\r\n<h2>02<\/h2>\r\n<\/div><div class=\"card card-3 \">\r\n<h2>03<\/h2>\r\n<\/div><div class=\"card card-4 \">\r\n<h2>04<\/h2>\r\n<\/div><div class=\"card card-5 \">\r\n<h2>05<\/h2>\r\n<\/div><div class=\"card card-6 \">\r\n<h2>06<\/h2>\r\n<\/div>    <\/div>\n\t<script src=\"https:\/\/unpkg.co\/gsap@3\/dist\/gsap.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollTrigger.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollToPlugin.min.js\"><\/script>\n\t<script>\n\tgsap.registerPlugin(ScrollTrigger, ScrollToPlugin);\n\n\tlet timeln = gsap.timeline({\n\t\tscrollTrigger: {\n\t\t\ttrigger: \".sdfsd.cards\",\n\t\t\tpin: true,\n\t\t\tpinSpacing: true,\n\t\t\tstart: \"left-=120px left\",\n\t\t\tend: \"+=3000\",\n\t\t\tscrub: 1\n\t\t}\n\t});\n\n\ttimeln.addLabel('card1');\n\ttimeln.to('.card-1', {\n\t\txPercent: 0,\n\t\topacity: 1\n\t});\n\n\ttimeln.fromTo('.card-2', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\topacity: 0\n\t},\n\t{\n\t\txPercent: 0,\n\t\tyPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});\n\t\/*timeln.from('.card-2', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\tduration:1.2,\n\t\tease: \"none\",\n\t\topacity: 0\n\t});\n\ttimeln.addLabel(\"card2\");\n\n\ttimeln.to(\".card-1\", {\n\t\tscale: 1,\n\t\txPercent: 0,\n\t\topacity: 1\n\t}, \"-=0.3\");\n\n\ttimeln.to('.card-2', {\n\t\txPercent: 0,\n\t\topacity: 1\n\t});*\/\n\t\t\n\ttimeln.fromTo('.card-3', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\topacity: 0\n\t},\n\t{\n\t\txPercent: 0,\n\t\tyPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});\n\n\t\/*timeln.from('.card-3', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\tduration:1.2,\n\t\topacity: 0\n\t});\n\ttimeln.addLabel(\"card3\");\n\n\ttimeln.to(\".card-2\", {\n\t\tscale: 1,\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t}, \"-=0.3\");\n\n\ttimeln.to('.card-3', {\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});*\/\n\t\n\t\ttimeln.fromTo('.card-4', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\topacity: 0\n\t},\n\t{\n\t\txPercent: 0,\n\t\tyPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});\n\t\/*timeln.from('.card-4', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\tduration:1.2,\n\t\topacity: 0\n\t});\n\ttimeln.addLabel(\"card4\");\n\t\n\ttimeln.to(\".card-3\", {\n\t\tscale: 1,\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t}, \"-=0.3\");\n\n\ttimeln.to('.card-4', {\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});*\/\n\t\t\n\t\ttimeln.fromTo('.card-5', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\topacity: 0\n\t},\n\t{\n\t\txPercent: 0,\n\t\tyPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});\n\t\/*timeln.from('.card-5', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\tduration:1.2,\n\t\topacity: 0\n\t});\n\ttimeln.addLabel(\"card5\");\n\t\t\n\ttimeln.to(\".card-4\", {\n\t\tscale: 1,\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t}, \"-=0.3\");\n\n\ttimeln.to('.card-5', {\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});*\/\n\t\t\n\t\ttimeln.fromTo('.card-6', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\topacity: 0\n\t},\n\t{\n\t\txPercent: 0,\n\t\tyPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});\n\t\/*timeln.from('.card-6', {\n\t\txPercent: 75,\n\t\tyPercent: 75,\n\t\tduration:1.2,\n\t\topacity: 0\n\t});\n\ttimeln.addLabel(\"card6\");\n\t\t\n\ttimeln.to(\".card-5\", {\n\t\tscale: 1,\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t}, \"-=0.3\");\n\n\ttimeln.to('.card-6', {\n\t\txPercent: 0,\n\t\tduration:1.2,\n\t\topacity: 1\n\t});*\/\n\t\t<\/script>\n\t[\/vc_column][\/vc_row]\r\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8220;in_container&#8220; full_screen_row_position=&#8220;middle&#8220; column_margin=&#8220;default&#8220; column_direction=&#8220;default&#8220; column_direction_tablet=&#8220;default&#8220; column_direction_phone=&#8220;default&#8220; scene_position=&#8220;center&#8220; text_color=&#8220;dark&#8220; text_align=&#8220;left&#8220; row_border_radius=&#8220;none&#8220; row_border_radius_applies=&#8220;bg&#8220; overflow=&#8220;visible&#8220; overlay_strength=&#8220;0.3&#8243; gradient_direction=&#8220;left_to_right&#8220; shape_divider_position=&#8220;bottom&#8220; bg_image_animation=&#8220;none&#8220;][vc_column column_padding=&#8220;no-extra-padding&#8220; column_padding_tablet=&#8220;inherit&#8220; column_padding_phone=&#8220;inherit&#8220; column_padding_position=&#8220;all&#8220; column_element_direction_desktop=&#8220;default&#8220; column_element_spacing=&#8220;default&#8220; desktop_text_alignment=&#8220;default&#8220; tablet_text_alignment=&#8220;default&#8220; phone_text_alignment=&#8220;default&#8220; background_color_opacity=&#8220;1&#8243; background_hover_color_opacity=&#8220;1&#8243; column_backdrop_filter=&#8220;none&#8220; column_shadow=&#8220;none&#8220;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":86,"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/lenis.alexanderkoch.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}