• 25-08-2024, 21:59:47
    #10
    ibozdemir70 adlı üyeden alıntı: mesajı görüntüle
    `DOMContentLoaded ` yerine `window.onload` olayını kullanmayı dener misin?

    `
    window.onload = function() {
    // GSAP animasyonlarınız burada başlayabilir
    };

    `
    Evet onuda kullandim. belki scope icinde kullanmadim o yuzden etki etmedi. Ama suan cerezleri silip girince tekrardan siteye biraz mantik kullarak overlay olusturdum. suan girince hafif beyaz gelip gidiyor sonra overlay rengini aliyor. sanirim body class ina overlay icin kullandigim rengi verirsem cozebilirim olayi
  • 25-08-2024, 22:10:35
    #11
    Foothill adlı üyeden alıntı: mesajı görüntüle
    Evet onuda kullandim. belki scope icinde kullanmadim o yuzden etki etmedi. Ama suan cerezleri silip girince tekrardan siteye biraz mantik kullarak overlay olusturdum. suan girince hafif beyaz gelip gidiyor sonra overlay rengini aliyor. sanirim body class ina overlay icin kullandigim rengi verirsem cozebilirim olayi

    Daha fazlası için kaynak koda göz atmak gerekiyor. Bu şekilde ihtimal çok ama kodu görünce daha netleşir.
  • 25-08-2024, 22:13:59
    #12
    ibozdemir70 adlı üyeden alıntı: mesajı görüntüle
    Daha fazlası için kaynak koda göz atmak gerekiyor. Bu şekilde ihtimal çok ama kodu görünce daha netleşir.

    Aynen koduma simdi baktim. domcontent icinde window onload kullanmisim. onunda icinde gsap koymusum. Aslinda body background renginide animasyon verirsem belki kullaniciyi yaniltarak bu durumu idare edersin ama oda ektra zaman aliyor timeline'da. Ama suan yaptigim son guncellemelerle mimimum'a indirdim bu olayi. linte r10 tiklayinca o dedigim olay halen var. cerezleri silmeye gerek yok. tekrardan refresh yapinca o goruntu olmuyor. keske direk girincede oyle olsa

    document.addEventListener("DOMContentLoaded", function (event) {
    // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets
        window.onload = function () {
    // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick)
            window.requestAnimationFrame(function () {
    // Check if current page is the home page
                const isHomePage = document.body.classList.contains("home");
    
                // Conditionally run the timeline code based on the current page
                if (isHomePage) {
    // GSAP custom code goes here
    
                    let heroSlogan__splitText = new SplitText(".hero__slogan", {
    type: "lines",
                    });
    
                    gsap.to(
    ".services__image-left, .services__image-middle, .services__image-right",
                        {
    scrollTrigger: {
    trigger: ".services__image-left",
                                start: "top bottom",
                                end: "bottom top",
                                scrub: true,
                            },
                            y: -25,
                        }
    );
  • 27-08-2024, 18:00:40
    #13
    Çok çirkin bir deneyim sunmuş webflow bunun aynısını yaptırmak istediğinize emin misiniz? Saygı duyarım ama sanki mouse ucundan birisi tutuyorda sayfa aşağı kaymıyor hissi veriyor. Sadelik her zaman şıklık katar fazla animasyon hem tarayıcıyı hem kullanıcıyı yorar. Umarım daha iyi bir iş çıkarırsınız deneyim olarak müşterileri bu izlenime sokmazsınız.
  • 27-08-2024, 19:32:55
    #14
    Foothill adlı üyeden alıntı: mesajı görüntüle
    Aynen koduma simdi baktim. domcontent icinde window onload kullanmisim. onunda icinde gsap koymusum. Aslinda body background renginide animasyon verirsem belki kullaniciyi yaniltarak bu durumu idare edersin ama oda ektra zaman aliyor timeline'da. Ama suan yaptigim son guncellemelerle mimimum'a indirdim bu olayi. linte r10 tiklayinca o dedigim olay halen var. cerezleri silmeye gerek yok. tekrardan refresh yapinca o goruntu olmuyor. keske direk girincede oyle olsa

    document.addEventListener("DOMContentLoaded", function (event) {
    // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets
        window.onload = function () {
    // OPTIONAL - waits til next tick render to run code (prevents running in the middle of render tick)
            window.requestAnimationFrame(function () {
    // Check if current page is the home page
                const isHomePage = document.body.classList.contains("home");
    
                // Conditionally run the timeline code based on the current page
                if (isHomePage) {
    // GSAP custom code goes here
    
                    let heroSlogan__splitText = new SplitText(".hero__slogan", {
    type: "lines",
                    });
    
                    gsap.to(
    ".services__image-left, .services__image-middle, .services__image-right",
                        {
    scrollTrigger: {
    trigger: ".services__image-left",
                                start: "top bottom",
                                end: "bottom top",
                                scrub: true,
                            },
                            y: -25,
                        }
    );
    Niye DOMContentLoaded eventi içinde onload kullandın bu kullanım yanlıs içinde ki kod dısında ki kodun tetiklenmesi anında calısır ,
    ve de DOMContentLoaded, sayfanın HTML yapısı tamamen yüklendiğinde; onload ise sayfanın tüm kaynakları yüklendiğinde tetiklenir.
  • 27-08-2024, 20:16:10
    #15
    ibozdemir70 adlı üyeden alıntı: mesajı görüntüle
    Niye DOMContentLoaded eventi içinde onload kullandın bu kullanım yanlıs içinde ki kod dısında ki kodun tetiklenmesi anında calısır ,
    ve de DOMContentLoaded, sayfanın HTML yapısı tamamen yüklendiğinde; onload ise sayfanın tüm kaynakları yüklendiğinde tetiklenir.
    Aynen. Anismasyon ve resimler varsa ikisini bir arada kullanmak garanti olur gibisinden. Simdi o sorunu hallettim overlay methodunu kullanarak. body class'ina ana sayfadaki krem rengini verdim. o gelip giden effect yok gibi artik cerezleri silip tekrar siteye yeniden baglansan bile.

    https://pyro.design/work

    Ama simdi diger sayfalarda sayfayi yenileyince krem rengi geliyor ilk once. diger sayfarin body class rengi krem rengi olmadigi icin. ama bu zor bisey degil. cozulur.

    benim simdi asil uzerinde durudugum olay, bu animasyonlar safari'de performansini iyi bulmuyorum. en iyi Firebox'da calisiyor bende.

    mobile'de iphone kullaniyorum. websites yazan kutucugun arkasindaki sari banner pixelleri kotu gorunuyor. ( Belki css skew kullaniyorum ve gsap animasyonlari skew ile boyle sorunlar veriyor. )



    birde mobile de sayfa ilk acildiginda, koyu siyah yada mavi ( buyuk arkaplan ) boyle acilirken tam kaymak gibi acilmiyor.

    https://www.baunfire.com/

    bu adamlarin anime ettigi seyler kaymak gibi. belki bunlar react, next js kullaniyor. ben wordpress kullaniyorum o yuzden mi acaba?
  • 27-08-2024, 20:51:55
    #16
    Foothill adlı üyeden alıntı: mesajı görüntüle
    Aynen. Anismasyon ve resimler varsa ikisini bir arada kullanmak garanti olur gibisinden. Simdi o sorunu hallettim overlay methodunu kullanarak. body class'ina ana sayfadaki krem rengini verdim. o gelip giden effect yok gibi artik cerezleri silip tekrar siteye yeniden baglansan bile.

    https://pyro.design/work

    Ama simdi diger sayfalarda sayfayi yenileyince krem rengi geliyor ilk once. diger sayfarin body class rengi krem rengi olmadigi icin. ama bu zor bisey degil. cozulur.

    benim simdi asil uzerinde durudugum olay, bu animasyonlar safari'de performansini iyi bulmuyorum. en iyi Firebox'da calisiyor bende.

    mobile'de iphone kullaniyorum. websites yazan kutucugun arkasindaki sari banner pixelleri kotu gorunuyor. ( Belki css skew kullaniyorum ve gsap animasyonlari skew ile boyle sorunlar veriyor. )



    birde mobile de sayfa ilk acildiginda, koyu siyah yada mavi ( buyuk arkaplan ) boyle acilirken tam kaymak gibi acilmiyor.

    https://www.baunfire.com/

    bu adamlarin anime ettigi seyler kaymak gibi. belki bunlar react, next js kullaniyor. ben wordpress kullaniyorum o yuzden mi acaba?
    iOS animasyon tercihlerine göre sayfalarda ki animasyon özelliklerini kısıtlar.