{"id":1895,"date":"2026-02-01T19:42:23","date_gmt":"2026-02-01T16:42:23","guid":{"rendered":"https:\/\/erenyaprak.com\/?p=1895"},"modified":"2026-02-05T23:41:30","modified_gmt":"2026-02-05T20:41:30","slug":"assorted-animations","status":"publish","type":"post","link":"https:\/\/erenyaprak.com\/en\/assorted-animations\/","title":{"rendered":"Assorted Animations for Client Website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1895\" class=\"elementor elementor-1895\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-086c629 e-flex e-con-boxed e-con e-parent\" data-id=\"086c629\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-559ec33 elementor-widget elementor-widget-text-editor\" data-id=\"559ec33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Haz\u0131rlanan animasyonlardan baz\u0131 \u00f6rnekleri a\u015fa\u011f\u0131da interaktif olarak inceleyebilirsiniz. WordPress altyap\u0131s\u0131nda masa\u00fcst\u00fc ve mobil sunumlar\u0131 ay\u0131rman\u0131n zorlu\u011fundan dolay\u0131 <em>sunum masa\u00fcst\u00fc veya tablet cihazlara uygundur.\u00a0<\/em><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb53de0 e-con-full e-flex e-con e-parent\" data-id=\"fb53de0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-670d7c5 e-con-full blur-bg e-flex elementor-invisible e-con e-child\" data-id=\"670d7c5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;absolute&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7aef77 elementor-widget elementor-widget-heading\" data-id=\"a7aef77\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Scrollytelling<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b92cdef elementor-widget elementor-widget-text-editor\" data-id=\"b92cdef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Anlat\u0131 ve etkile\u015fimin kesi\u015fimi.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63b7099 elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"63b7099\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"icon.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<i aria-hidden=\"true\" class=\"phl phlight-arrow-down\"><\/i>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-244e5e2 e-con-full blur-bg e-flex elementor-invisible e-con e-child\" data-id=\"244e5e2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;absolute&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6e3314 elementor-widget elementor-widget-heading\" data-id=\"a6e3314\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Nedir Bu?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e1961c elementor-widget elementor-widget-text-editor\" data-id=\"2e1961c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"paragraph\">Scrollytelling, hikayenin kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a a\u00e7\u0131\u011fa \u00e7\u0131kt\u0131\u011f\u0131 dijital bir anlat\u0131m tekni\u011fidir. G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131 sabitleyerek ve kayd\u0131rma konumuna g\u00f6re arka plan\u0131 manip\u00fcle ederek kusursuz, s\u00fcr\u00fckleyici bir deneyim yarat\u0131r.<\/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-75dbda1 elementor-widget elementor-widget-html\" data-id=\"75dbda1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"sequence-1\" class=\"sequence-track\" style=\"height: 300vh;\">\r\n    <div class=\"sequence-sticky\">\r\n        <canvas class=\"scroll-canvas\"><\/canvas>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .elementor-section, .elementor-column, .elementor-widget-html {\r\n        overflow: visible !important;\r\n    }\r\n    .sequence-track {\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    .sequence-sticky {\r\n        position: -webkit-sticky;\r\n        position: sticky;\r\n        top: 20vh; \r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 16 \/ 9; \r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n    canvas.scroll-canvas {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n    }\r\n<\/style>\r\n\r\n<script>\r\nif (typeof gsap === 'undefined') {\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\\\/script>');\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\\\/script>');\r\n}\r\n<\/script>\r\n\r\n<script>\r\n\/\/ We wrap the code in a function to isolate variables\r\n(function() {\r\n    \r\n    \/\/ --- STEP 1: UNIQUE CONFIGURATION ---\r\n    \r\n    \/\/ MAKE SURE THIS MATCHES THE ID IN THE HTML ABOVE\r\n    const uniqueID = \"sequence-1\"; \r\n    \r\n    const config = {\r\n        baseURL: \"https:\/\/erenyaprak.com\/wp-content\/uploads\/2026\/02\/themtech_\",\r\n        extension: \".webp\",\r\n        frameCount: 72,\r\n        padding: 4\r\n    };\r\n    \r\n    \/\/ ------------------------------------\r\n\r\n    \/\/ Wait for DOM and Libraries\r\n    const init = () => {\r\n        \/\/ Register Plugin safely\r\n        if (typeof ScrollTrigger !== 'undefined') {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n        } else {\r\n            \/\/ Retry if library isn't ready yet\r\n            setTimeout(init, 50);\r\n            return;\r\n        }\r\n\r\n        \/\/ Find the specific container for THIS animation\r\n        const container = document.getElementById(uniqueID);\r\n        if (!container) return; \/\/ Exit if ID not found\r\n\r\n        const canvas = container.querySelector('canvas.scroll-canvas');\r\n        const context = canvas.getContext(\"2d\");\r\n        const stickyContainer = container.querySelector('.sequence-sticky');\r\n        \r\n        const seq = { frame: 0 };\r\n        const images = [];\r\n\r\n        const currentFrame = index => {\r\n            let number = (index + 1).toString();\r\n            while (number.length < config.padding) number = \"0\" + number;\r\n            return `${config.baseURL}${number}${config.extension}`;\r\n        };\r\n\r\n        \/\/ Preload\r\n        for (let i = 0; i < config.frameCount; i++) {\r\n            const img = new Image();\r\n            img.src = currentFrame(i);\r\n            images.push(img);\r\n        }\r\n\r\n        \/\/ Create Animation scoped to THIS container\r\n        gsap.to(seq, {\r\n            frame: config.frameCount - 1,\r\n            snap: \"frame\",\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: container, \/\/ Triggers only when THIS container scrolls\r\n                start: \"top top\", \r\n                end: \"bottom bottom\",\r\n                scrub: 0, \r\n            },\r\n            onUpdate: render\r\n        });\r\n\r\n        function render() {\r\n            const img = images[seq.frame];\r\n            if (img) {\r\n                const parentWidth = stickyContainer.clientWidth;\r\n                const parentHeight = stickyContainer.clientHeight;\r\n                \r\n                if (canvas.width !== parentWidth || canvas.height !== parentHeight) {\r\n                    canvas.width = parentWidth;\r\n                    canvas.height = parentHeight;\r\n                }\r\n\r\n                const hRatio = canvas.width \/ img.width;\r\n                const vRatio = canvas.height \/ img.height;\r\n                const ratio = Math.min(hRatio, vRatio); \r\n                \r\n                const centerShift_x = (canvas.width - img.width * ratio) \/ 2;\r\n                const centerShift_y = (canvas.height - img.height * ratio) \/ 2;\r\n                \r\n                context.clearRect(0, 0, canvas.width, canvas.height);\r\n                context.drawImage(\r\n                    img, \r\n                    0, 0, img.width, img.height,\r\n                    centerShift_x, centerShift_y, img.width * ratio, img.height * ratio\r\n                );\r\n            }\r\n        }\r\n\r\n        window.addEventListener(\"resize\", render);\r\n        images[0].onload = render;\r\n        setTimeout(render, 100);\r\n    };\r\n\r\n    \/\/ Initialize when page is ready\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", init);\r\n    } else {\r\n        init();\r\n    }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18306fe e-con-full e-flex e-con e-parent\" data-id=\"18306fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-184bb28 e-con-full blur-bg e-flex elementor-invisible e-con e-child\" data-id=\"184bb28\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;absolute&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04cb2f3 elementor-widget elementor-widget-heading\" data-id=\"04cb2f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Nas\u0131l \u00c7al\u0131\u015f\u0131r<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c2ffcf elementor-widget elementor-widget-text-editor\" data-id=\"6c2ffcf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ol><li class=\"paragraph\">Kayd\u0131rma Tetiklemesi: Efektler kayd\u0131rma miktar\u0131na g\u00f6re tetiklenir.<\/li><li>Paralaks Efektleri: Arka planlar, \u00f6n planlardan daha yava\u015f hareket eder.<\/li><li><div class=\"paragraph\">Ad\u0131m Tabanl\u0131 Anlat\u0131m: \u0130\u00e7erik bloklar\u0131 g\u00f6rsel d\u00f6n\u00fc\u015f\u00fcmleri tetikler.<\/div><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0748a8c e-con-full blur-bg e-flex elementor-invisible e-con e-child\" data-id=\"0748a8c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;absolute&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4640652 elementor-widget elementor-widget-heading\" data-id=\"4640652\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Etkisi<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-568dbbe elementor-widget elementor-widget-text-editor\" data-id=\"568dbbe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Pasif okumay\u0131 aktif bir yolculu\u011fa d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Hikayeyi kullan\u0131c\u0131n\u0131n h\u0131z\u0131na g\u00f6re ayarlayarak, tutma oran\u0131n\u0131 ve duygusal ba\u011flant\u0131y\u0131 art\u0131r\u0131r\u0131z.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d26371c e-con-full e-flex e-con e-child\" data-id=\"d26371c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-e283168 e-con-full e-flex e-con e-child\" data-id=\"e283168\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a69210 elementor-widget elementor-widget-heading\" data-id=\"0a69210\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">3x<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c72e5a4 elementor-widget elementor-widget-text-editor\" data-id=\"c72e5a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Etkile\u015fim<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-283e631 e-con-full e-flex e-con e-child\" data-id=\"283e631\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a208c02 elementor-widget elementor-widget-heading\" data-id=\"a208c02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">%80<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c447bf5 elementor-widget elementor-widget-text-editor\" data-id=\"c447bf5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Tamamlama Oran\u0131<\/p>\t\t\t\t\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 class=\"elementor-element elementor-element-a335353 elementor-widget elementor-widget-html\" data-id=\"a335353\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"sequence-2\" class=\"sequence-track\" style=\"height: 300vh;\">\r\n    <div class=\"sequence-sticky\">\r\n        <canvas class=\"scroll-canvas\"><\/canvas>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .elementor-section, .elementor-column, .elementor-widget-html {\r\n        overflow: visible !important;\r\n    }\r\n    .sequence-track {\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    .sequence-sticky {\r\n        position: -webkit-sticky;\r\n        position: sticky;\r\n        top: 20vh; \r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 16 \/ 9; \r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n    canvas.scroll-canvas {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n    }\r\n<\/style>\r\n\r\n<script>\r\nif (typeof gsap === 'undefined') {\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\\\/script>');\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\\\/script>');\r\n}\r\n<\/script>\r\n\r\n<script>\r\n\/\/ We wrap the code in a function to isolate variables\r\n(function() {\r\n    \r\n    \/\/ --- STEP 1: UNIQUE CONFIGURATION ---\r\n    \r\n    \/\/ MAKE SURE THIS MATCHES THE ID IN THE HTML ABOVE\r\n    const uniqueID = \"sequence-2\"; \r\n    \r\n    const config = {\r\n        baseURL: \"https:\/\/erenyaprak.com\/wp-content\/uploads\/2026\/02\/binary1_\",\r\n        extension: \".webp\",\r\n        frameCount: 48,\r\n        padding: 4\r\n    };\r\n    \r\n    \/\/ ------------------------------------\r\n\r\n    \/\/ Wait for DOM and Libraries\r\n    const init = () => {\r\n        \/\/ Register Plugin safely\r\n        if (typeof ScrollTrigger !== 'undefined') {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n        } else {\r\n            \/\/ Retry if library isn't ready yet\r\n            setTimeout(init, 50);\r\n            return;\r\n        }\r\n\r\n        \/\/ Find the specific container for THIS animation\r\n        const container = document.getElementById(uniqueID);\r\n        if (!container) return; \/\/ Exit if ID not found\r\n\r\n        const canvas = container.querySelector('canvas.scroll-canvas');\r\n        const context = canvas.getContext(\"2d\");\r\n        const stickyContainer = container.querySelector('.sequence-sticky');\r\n        \r\n        const seq = { frame: 0 };\r\n        const images = [];\r\n\r\n        const currentFrame = index => {\r\n            let number = (index + 1).toString();\r\n            while (number.length < config.padding) number = \"0\" + number;\r\n            return `${config.baseURL}${number}${config.extension}`;\r\n        };\r\n\r\n        \/\/ Preload\r\n        for (let i = 0; i < config.frameCount; i++) {\r\n            const img = new Image();\r\n            img.src = currentFrame(i);\r\n            images.push(img);\r\n        }\r\n\r\n        \/\/ Create Animation scoped to THIS container\r\n        gsap.to(seq, {\r\n            frame: config.frameCount - 1,\r\n            snap: \"frame\",\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: container, \/\/ Triggers only when THIS container scrolls\r\n                start: \"top top\", \r\n                end: \"bottom bottom\",\r\n                scrub: 0, \r\n            },\r\n            onUpdate: render\r\n        });\r\n\r\n        function render() {\r\n            const img = images[seq.frame];\r\n            if (img) {\r\n                const parentWidth = stickyContainer.clientWidth;\r\n                const parentHeight = stickyContainer.clientHeight;\r\n                \r\n                if (canvas.width !== parentWidth || canvas.height !== parentHeight) {\r\n                    canvas.width = parentWidth;\r\n                    canvas.height = parentHeight;\r\n                }\r\n\r\n                const hRatio = canvas.width \/ img.width;\r\n                const vRatio = canvas.height \/ img.height;\r\n                const ratio = Math.min(hRatio, vRatio); \r\n                \r\n                const centerShift_x = (canvas.width - img.width * ratio) \/ 2;\r\n                const centerShift_y = (canvas.height - img.height * ratio) \/ 2;\r\n                \r\n                context.clearRect(0, 0, canvas.width, canvas.height);\r\n                context.drawImage(\r\n                    img, \r\n                    0, 0, img.width, img.height,\r\n                    centerShift_x, centerShift_y, img.width * ratio, img.height * ratio\r\n                );\r\n            }\r\n        }\r\n\r\n        window.addEventListener(\"resize\", render);\r\n        images[0].onload = render;\r\n        setTimeout(render, 100);\r\n    };\r\n\r\n    \/\/ Initialize when page is ready\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", init);\r\n    } else {\r\n        init();\r\n    }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9379090 e-con-full e-flex e-con e-parent\" data-id=\"9379090\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-723089c e-con-full blur-bg e-flex elementor-invisible e-con e-child\" data-id=\"723089c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;absolute&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-159f4fd elementor-widget elementor-widget-heading\" data-id=\"159f4fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Haz\u0131r M\u0131s\u0131n?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-acbec8c elementor-widget elementor-widget-text-editor\" data-id=\"acbec8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Deneyimi yeniden ya\u015famak i\u00e7in yukar\u0131 kayd\u0131rmaya ba\u015fla.<br \/>D\u00f6ng\u00fcn\u00fcn kendisi hikayedir.<\/p>\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-80f234b elementor-widget elementor-widget-html\" data-id=\"80f234b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"sequence-3\" class=\"sequence-track\" style=\"height: 300vh;\">\r\n    <div class=\"sequence-sticky\">\r\n        <canvas class=\"scroll-canvas\"><\/canvas>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    .elementor-section, .elementor-column, .elementor-widget-html {\r\n        overflow: visible !important;\r\n    }\r\n    .sequence-track {\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    .sequence-sticky {\r\n        position: -webkit-sticky;\r\n        position: sticky;\r\n        top: 20vh; \r\n        width: 100%;\r\n        height: auto;\r\n        aspect-ratio: 16 \/ 9; \r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n    canvas.scroll-canvas {\r\n        display: block;\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n    }\r\n<\/style>\r\n\r\n<script>\r\nif (typeof gsap === 'undefined') {\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\\\/script>');\r\n    document.write('<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\\\/script>');\r\n}\r\n<\/script>\r\n\r\n<script>\r\n\/\/ We wrap the code in a function to isolate variables\r\n(function() {\r\n    \r\n    \/\/ --- STEP 1: UNIQUE CONFIGURATION ---\r\n    \r\n    \/\/ MAKE SURE THIS MATCHES THE ID IN THE HTML ABOVE\r\n    const uniqueID = \"sequence-3\"; \r\n    \r\n    const config = {\r\n        baseURL: \"https:\/\/erenyaprak.com\/wp-content\/uploads\/2026\/02\/binary_bg_\",\r\n        extension: \".webp\",\r\n        frameCount: 130,\r\n        padding: 4\r\n    };\r\n    \r\n    \/\/ ------------------------------------\r\n\r\n    \/\/ Wait for DOM and Libraries\r\n    const init = () => {\r\n        \/\/ Register Plugin safely\r\n        if (typeof ScrollTrigger !== 'undefined') {\r\n            gsap.registerPlugin(ScrollTrigger);\r\n        } else {\r\n            \/\/ Retry if library isn't ready yet\r\n            setTimeout(init, 50);\r\n            return;\r\n        }\r\n\r\n        \/\/ Find the specific container for THIS animation\r\n        const container = document.getElementById(uniqueID);\r\n        if (!container) return; \/\/ Exit if ID not found\r\n\r\n        const canvas = container.querySelector('canvas.scroll-canvas');\r\n        const context = canvas.getContext(\"2d\");\r\n        const stickyContainer = container.querySelector('.sequence-sticky');\r\n        \r\n        const seq = { frame: 0 };\r\n        const images = [];\r\n\r\n        const currentFrame = index => {\r\n            let number = (index + 1).toString();\r\n            while (number.length < config.padding) number = \"0\" + number;\r\n            return `${config.baseURL}${number}${config.extension}`;\r\n        };\r\n\r\n        \/\/ Preload\r\n        for (let i = 0; i < config.frameCount; i++) {\r\n            const img = new Image();\r\n            img.src = currentFrame(i);\r\n            images.push(img);\r\n        }\r\n\r\n        \/\/ Create Animation scoped to THIS container\r\n        gsap.to(seq, {\r\n            frame: config.frameCount - 1,\r\n            snap: \"frame\",\r\n            ease: \"none\",\r\n            scrollTrigger: {\r\n                trigger: container, \/\/ Triggers only when THIS container scrolls\r\n                start: \"top top\", \r\n                end: \"bottom bottom\",\r\n                scrub: 0, \r\n            },\r\n            onUpdate: render\r\n        });\r\n\r\n        function render() {\r\n            const img = images[seq.frame];\r\n            if (img) {\r\n                const parentWidth = stickyContainer.clientWidth;\r\n                const parentHeight = stickyContainer.clientHeight;\r\n                \r\n                if (canvas.width !== parentWidth || canvas.height !== parentHeight) {\r\n                    canvas.width = parentWidth;\r\n                    canvas.height = parentHeight;\r\n                }\r\n\r\n                const hRatio = canvas.width \/ img.width;\r\n                const vRatio = canvas.height \/ img.height;\r\n                const ratio = Math.min(hRatio, vRatio); \r\n                \r\n                const centerShift_x = (canvas.width - img.width * ratio) \/ 2;\r\n                const centerShift_y = (canvas.height - img.height * ratio) \/ 2;\r\n                \r\n                context.clearRect(0, 0, canvas.width, canvas.height);\r\n                context.drawImage(\r\n                    img, \r\n                    0, 0, img.width, img.height,\r\n                    centerShift_x, centerShift_y, img.width * ratio, img.height * ratio\r\n                );\r\n            }\r\n        }\r\n\r\n        window.addEventListener(\"resize\", render);\r\n        images[0].onload = render;\r\n        setTimeout(render, 100);\r\n    };\r\n\r\n    \/\/ Initialize when page is ready\r\n    if (document.readyState === \"loading\") {\r\n        document.addEventListener(\"DOMContentLoaded\", init);\r\n    } else {\r\n        init();\r\n    }\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Client-requested animations produced for use as a dynamic background.<\/p>","protected":false},"author":1,"featured_media":2323,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-digital-graphics"],"_links":{"self":[{"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/posts\/1895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/comments?post=1895"}],"version-history":[{"count":166,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/posts\/1895\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/posts\/1895\/revisions\/2329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/media\/2323"}],"wp:attachment":[{"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/media?parent=1895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/categories?post=1895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erenyaprak.com\/en\/wp-json\/wp\/v2\/tags?post=1895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}