{"id":1281,"date":"2025-06-25T13:12:00","date_gmt":"2025-06-25T13:12:00","guid":{"rendered":"https:\/\/animacio.teszt.website\/?page_id=1281"},"modified":"2025-06-27T17:13:24","modified_gmt":"2025-06-27T17:13:24","slug":"komplex-szoveg-animaciok","status":"publish","type":"page","link":"https:\/\/animacio.teszt.website\/en\/komplex-szoveg-animaciok\/","title":{"rendered":"Komplex sz\u00f6veg anim\u00e1ci\u00f3k"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1281\" class=\"elementor elementor-1281\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a58dccd e-con-full services-bg elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"a58dccd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-356d8c2 elementor-widget elementor-widget-heading\" data-id=\"356d8c2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Komplex sz\u00f6veg anim\u00e1ci\u00f3k<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c8f337 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"2c8f337\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ezek m\u00e1r j\u00f3val komplexebb anim\u00e1ci\u00f3k. A sz\u00f6vegek sorokra, szavakra \u00e9s bet\u0171kre vannak sz\u00e9tbontva, teh\u00e1t eg\u00e9szen bet\u0171 szintig k\u00fcl\u00f6n lehet \u0151ket anim\u00e1lni. Itt nem ism\u00e9tl\u0151dnek az anim\u00e1ci\u00f3k, mint a CSS anim\u00e1ci\u00f3kn\u00e1l, mert minden \u00fajra megjelen\u00e9sre ism\u00e9tk\u0151dik az anim\u00e1ci\u00f3. Teh\u00e1t csak vissza kell scrollozni, hogy a sz\u00f6veg elt\u00fcnj\u00f6n \u00e9s \u00fajb\u00f3li megjelen\u00e9sre \u00fajra anim\u00e1l\u00f3dik. Direkt vannak lelass\u00edtva az anim\u00e1ci\u00f3k, b\u00e1r n\u00e9h\u00e1nyn\u00e1l kifejezetten j\u00f3 a lass\u00edt\u00e1s, ha nem t\u00fal hossz\u00fa a sz\u00f6veg.<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\">\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-616d78c e-con-full e-flex e-con e-parent\" data-id=\"616d78c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8bef5b5 elementor-widget__width-initial tco-slide-line elementor-widget elementor-widget-heading\" data-id=\"8bef5b5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Soronk\u00e9nti slide in up megjelen\u00edt\u00e9s!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e75be34 elementor-widget__width-initial tco-slide-line-p elementor-widget elementor-widget-text-editor\" data-id=\"e75be34\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &#8222;de Finibus Bonorum et Malorum&#8221; (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, &#8222;Lorem ipsum dolor sit amet..&#8221;, comes from a line in section 1.10.32.<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\">\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d27d989 elementor-widget elementor-widget-html\" data-id=\"d27d989\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorSL = new SplitType('.tco-slide-line h2', { types: 'lines' });\nconst textSL = new SplitType('.tco-slide-line', { types: 'words' });\n\nconst szovegSL = gsap.utils.toArray('.tco-slide-line .line');\n\nszovegSL.forEach((elementSL) => {\n    const elemekSL = elementSL.querySelectorAll('.tco-slide-line .word');\n    gsap.fromTo(\n  elemekSL,\n  { \n    \/\/x: -5,\n    y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.0,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementSL,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\nconst sorSpL = new SplitType('.tco-slide-line-p p', { types: 'lines' });\nconst textSpL = new SplitType('.tco-slide-line-p', { types: 'words' });\n\nconst szovegSpL = gsap.utils.toArray('.tco-slide-line-p .line');\n\nszovegSpL.forEach((elementSpL) => {\n    const elemekSpL = elementSpL.querySelectorAll('.tco-slide-line-p .word');\n    gsap.fromTo(\n  elemekSpL,\n  { \n    \/\/x: -5,\n    y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.0,\n    duration: 1.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementSpL,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3dcb9de e-con-full e-flex e-con e-parent\" data-id=\"3dcb9de\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28bed3f elementor-widget__width-initial tco-slide elementor-widget elementor-widget-heading\" data-id=\"28bed3f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Szavank\u00e9nti slide in up megjelen\u00edt\u00e9s!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8856473 elementor-widget__width-initial tco-slide-p elementor-widget elementor-widget-text-editor\" data-id=\"8856473\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &#8222;de Finibus Bonorum et Malorum&#8221; (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, &#8222;Lorem ipsum dolor sit amet..&#8221;, comes from a line in section 1.10.32.<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\">\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72d8b7a elementor-widget elementor-widget-html\" data-id=\"72d8b7a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorS = new SplitType('.tco-slide h2', { types: 'lines' });\nconst textS = new SplitType('.tco-slide', { types: 'words' });\n\nconst szovegS = gsap.utils.toArray('.tco-slide .line');\n\nszovegS.forEach((elementS) => {\n    const elemekS = elementS.querySelectorAll('.tco-slide .word');\n    gsap.fromTo(\n  elemekS,\n  { \n    \/\/x: -5,\n    y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementS,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\nconst sorSp = new SplitType('.tco-slide-p p', { types: 'lines' });\nconst textSp = new SplitType('.tco-slide-p', { types: 'words' });\n\nconst szovegSp = gsap.utils.toArray('.tco-slide-p .line');\n\nszovegSp.forEach((elementSp) => {\n    const elemekSp = elementSp.querySelectorAll('.tco-slide-p .word');\n    gsap.fromTo(\n  elemekSp,\n  { \n    \/\/x: -5,\n    y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.05,\n    duration: 1.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementSp,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c65d0ac e-con-full e-flex e-con e-parent\" data-id=\"c65d0ac\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0d44ca elementor-widget__width-initial tco-fade elementor-widget elementor-widget-heading\" data-id=\"f0d44ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Szavank\u00e9nti fade in megjelen\u00edt\u00e9s!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-884f9d7 elementor-widget__width-initial tco-fade-p elementor-widget elementor-widget-text-editor\" data-id=\"884f9d7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &#8222;de Finibus Bonorum et Malorum&#8221; (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, &#8222;Lorem ipsum dolor sit amet..&#8221;, comes from a line in section 1.10.32.<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\">\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b257a6 elementor-widget elementor-widget-html\" data-id=\"4b257a6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorF = new SplitType('.tco-fade h2', { types: 'lines' });\nconst textF = new SplitType('.tco-fade', { types: 'words' });\n\nconst szovegF = gsap.utils.toArray('.tco-fade .line');\n\nszovegF.forEach((elementF) => {\n    const elemekF = elementF.querySelectorAll('.tco-fade .word');\n    gsap.fromTo(\n  elemekF,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.25,\n    duration: 1.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementF,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\nconst sorFp = new SplitType('.tco-fade-p p', { types: 'lines' });\nconst textFp = new SplitType('.tco-fade-p', { types: 'words' });\n\nconst szovegFp = gsap.utils.toArray('.tco-fade-p .line');\n\nszovegFp.forEach((elementFp) => {\n    const elemekFp = elementFp.querySelectorAll('.tco-fade-p .word');\n    gsap.fromTo(\n  elemekFp,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.05,\n    duration: 1.0,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementFp,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd0e876 e-con-full e-flex e-con e-parent\" data-id=\"dd0e876\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40ab796 elementor-widget__width-initial tco-blur elementor-widget elementor-widget-heading\" data-id=\"40ab796\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Blur megjelen\u00edt\u00e9s. Ennek csak r\u00f6vid sz\u00f6vegn\u00e9l van \u00e9rtelme!<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37c4395 elementor-widget__width-initial tco-blur elementor-widget elementor-widget-heading\" data-id=\"37c4395\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32.\n\nThe standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-738c100 elementor-widget elementor-widget-html\" data-id=\"738c100\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorG = new SplitType('.tco-blur h2', { types: 'lines' });\nconst textG = new SplitType('.tco-blur', { types: 'words' });\n\nconst szovegB = gsap.utils.toArray('.tco-blur .line');\n\nszovegB.forEach((elementB) => {\n    const elemekB = elementB.querySelectorAll('.tco-blur .word');\n    gsap.fromTo(\n  elemekB,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\tfilter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\tfilter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementB,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6c9368d e-con-full e-flex e-con e-parent\" data-id=\"6c9368d\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d4e9863 e-con-full e-flex e-con e-child\" data-id=\"d4e9863\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e26b74 elementor-widget__width-initial tco-char3 elementor-widget elementor-widget-heading\" data-id=\"1e26b74\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bet\u0171nk\u00e9nti slide up<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b709e0f elementor-widget elementor-widget-html\" data-id=\"b709e0f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorC3 = new SplitType('.tco-char3 h2', { types: 'lines' });\nconst textC3 = new SplitType('.tco-char3', { types: 'chars' });\n\nconst szovegC3 = gsap.utils.toArray('.tco-char3 .line');\n\nszovegC3.forEach((elementC3) => {\n    const elemekC3 = elementC3.querySelectorAll('.tco-char3 .char');\n    gsap.fromTo(\n  elemekC3,\n  { \n    \/\/x: -5,\n    y: 100,\n\t\/\/filter: \"blur(15px)\",\n\t\/\/scale: 2.5,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    y: 0,\n\t\/\/filter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementC3,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c47c6bf e-con-full e-flex e-con e-child\" data-id=\"c47c6bf\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b03aa44 elementor-widget__width-initial tco-char1 elementor-widget elementor-widget-heading\" data-id=\"b03aa44\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bet\u0171nk\u00e9nti BLUR<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d41947 elementor-widget elementor-widget-html\" data-id=\"4d41947\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorC = new SplitType('.tco-char1 h2', { types: 'lines' });\nconst textC = new SplitType('.tco-char1', { types: 'chars' });\n\nconst szovegC = gsap.utils.toArray('.tco-char1 .line');\n\nszovegC.forEach((elementC) => {\n    const elemekC = elementC.querySelectorAll('.tco-char1 .char');\n    gsap.fromTo(\n  elemekC,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\tfilter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\tfilter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementC,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b6bfa5 e-con-full e-flex e-con e-child\" data-id=\"8b6bfa5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a52ae7 elementor-widget__width-initial tco-char2 elementor-widget elementor-widget-heading\" data-id=\"5a52ae7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Bet\u0171nk\u00e9nti BLUR \u00e9s zoom out<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64a5996 elementor-widget elementor-widget-html\" data-id=\"64a5996\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\nwindow.addEventListener('load', function () {\nconst sorC2 = new SplitType('.tco-char2 h2', { types: 'lines' });\nconst textC2 = new SplitType('.tco-char2', { types: 'chars' });\n\nconst szovegC2 = gsap.utils.toArray('.tco-char2 .line');\n\nszovegC2.forEach((elementC2) => {\n    const elemekC2 = elementC2.querySelectorAll('.tco-char2 .char');\n    gsap.fromTo(\n  elemekC2,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\tfilter: \"blur(15px)\",\n\tscale: 2.5,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\tfilter: \"blur(0px)\",\n\tscale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementC2,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2be533d e-con-full e-flex e-con e-child\" data-id=\"2be533d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59256c3 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"59256c3\" data-element_type=\"widget\" id=\"tco-scramble\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">S<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-524fd84 elementor-widget elementor-widget-html\" data-id=\"524fd84\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<script>\ngsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin);\nwindow.addEventListener('load', function () {\n\n\nScrollTrigger.create({\n  trigger: \"#tco-scramble\",\n  start: \"top 80%\", \/\/ amikor az elem el\u00e9ri a viewport fels\u0151 80%-\u00e1t\n  end: \"bottom 0%\", \/\/ \u00e9s amikor elt\u0171nik alul\n  onEnter: () => animateScramble(),\n  onEnterBack: () => animateScramble(), \/\/ amikor \u00fajra bel\u00e9p alulr\u00f3l\n});\n\nfunction animateScramble() {\n  gsap.to(\"#tco-scramble\", {\n    duration: 5,\n    scrambleText: {\n      text: \"Scramble text. Max egy soron, mondaton \u00e9rdemes alkalmazni\",\n      chars: \"lowercase\"\n    }\n  });\n}\n\n\n\n\/*\ngsap.to(\"#tco-scramble\", 5, {\n  delay: 1.5,\n  scrambleText: {\n    text: \"Scramble text. Max egy soron, mondaton \u00e9rdemes alkalmazni\",\n    \/\/rightToLeft: true,\n    chars: \"lowercase\"\n  }\n});\n*\/\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Komplex sz\u00f6veg anim\u00e1ci\u00f3k Ezek m\u00e1r j\u00f3val komplexebb anim\u00e1ci\u00f3k. A sz\u00f6vegek sorokra, szavakra \u00e9s bet\u0171kre vannak sz\u00e9tbontva, teh\u00e1t eg\u00e9szen bet\u0171 szintig k\u00fcl\u00f6n lehet \u0151ket anim\u00e1lni. Itt nem ism\u00e9tl\u0151dnek az anim\u00e1ci\u00f3k, mint a CSS anim\u00e1ci\u00f3kn\u00e1l, mert minden \u00fajra megjelen\u00e9sre ism\u00e9tk\u0151dik az anim\u00e1ci\u00f3. Teh\u00e1t csak vissza kell scrollozni, hogy a sz\u00f6veg elt\u00fcnj\u00f6n \u00e9s \u00fajb\u00f3li megjelen\u00e9sre \u00fajra anim\u00e1l\u00f3dik. Direkt [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1281","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/comments?post=1281"}],"version-history":[{"count":235,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1281\/revisions"}],"predecessor-version":[{"id":1889,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1281\/revisions\/1889"}],"wp:attachment":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/media?parent=1281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}