Jump to content
Search Community

Slow loading on Safari but good in chrome

maxou_1403 test
Moderator Tag

Recommended Posts

Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean.

Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. 

The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap :

 

function video_text_animation() {
    let tl = gsap.timeline();

    if (tl.scrollTrigger) {
        tl.scrollTrigger.kill();
    }


////////                Video Header title                //////////////
    var childSplit = new SplitText(".bloc_header--header", {type:"lines",  linesClass: "bloc_header--header-child"});
    var parentSplit = new SplitText(".bloc_header--header", { type: "lines", linesClass: "bloc_header--header-parent"});


    var w = window.innerWidth;
    var size = w > 1366 ? "big" : "small";
    if (size === "big") {
        tl = gsap.timeline();
        tl.addLabel("animateVideo").from(childSplit.lines, {
            duration: 0.5,
            yPercent: 100,
            ease: "power4",
            stagger: 0.1
        });
    }
    return tl;
}



function animation_scroll_text() {
    gsap.registerPlugin(ScrollTrigger);
    let tl = gsap.timeline();

    if (tl.scrollTrigger) {
        tl.scrollTrigger.kill();
    }

////////                Diptyque title                   //////////////

    new SplitText(".dyptique__card-heading--title", {type:"lines", linesClass: "dyptique__card-heading--title-child"});
    new SplitText(".dyptique__card-heading--title", {type:"lines",  linesClass: "dyptique__card-heading--title-parent"});

    var w = window.innerWidth;
    var size = w > 1366 ? "big" : "small";
    if (size === "big") {
        gsap.utils.toArray(".dyptique__card-heading--title").forEach((section, i) => {
        tl = gsap.timeline({
            scrollTrigger: {
                id: "trigger2",
                start: "center 80%",
                trigger: section,
                toggleActions: "play pause pause pause",
            },
        });
            tl.addLabel("animateDiptyque").from(section.querySelectorAll(".dyptique__card-heading--title-child"), {
                duration: 0.5,
                yPercent: 100,
                ease: "power4",
                stagger: 0.1
            });
        });
    }
////////                Content title                   //////////////
    new SplitText(".bloc_contents--title", {type:"lines", linesClass: "bloc_contents--title-child"});
    new SplitText(".bloc_contents--title", {type:"lines",  linesClass: "bloc_contents--title-parent"});

    if (size === "big") {
        gsap.utils.toArray(".bloc_contents--title").forEach((section, i) => {
        tl = gsap.timeline({
            scrollTrigger: {
                id: "trigger3",
                start: "center 80%",
                trigger: section,
                toggleActions: "play pause pause pause",
            },
        });
            tl.addLabel("animateTitle").from(section.querySelectorAll(".bloc_contents--title-child"), {
                duration: 0.5,
                yPercent: 100,
                ease: "power4",
                stagger: 0.1
            });
        });
    }

    return tl;
}


function add_scripts() {

    jQuery(document).ready(function ($) {
        "use strict";

        $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/accueil/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">');
        $('head').append('<link href="https://wordpress-364904-1405009.cloudwaysapps.com/le-mag/?xlink=css&ver=5.4.2" rel="stylesheet" type="text/css">');

        $('.center-title').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',});
        $('.title-anim').attr({'data-aos-enable': 'true','data-aos': 'slide-up','data-aos-anchor-placement': 'top-bottom','data-aos-easing': 'ease','data-aos-duration': '400','data-aos-offset': '50',});
        $('.center-title2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '1',});
        $('.title-anim-02').attr({'data-aos-enable': 'true','data-aos': 'fade',});
        $('.diptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',});
        $('.bloc_contents--text').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '200',});
        $('.quadriptyque__card_1').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',});
        $('.quadriptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',});
        $('.quadriptyque__card_3').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',});
        $('.quadriptyque__card_4').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',});
        $('.quadriptyque__card--image').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-once': 'true',});
        $('.triptyque__card_2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '200',});
        $('.triptyque__card_3').attr({'data-aos-enable': 'true','data-aos-anchor-placement': 'center-bottom','data-aos-delay': '400','data-aos': 'fade',});
        $('.triptyque__card').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-anchor-placement': 'center-bottom',});
        $('.diptyque__card2').attr({'data-aos-enable': 'true','data-aos': 'fade','data-aos-delay': '400','data-aos-anchor-placement': 'center-bottom',});

        $('body').addClass('oxygen-aos-enabled');
    });
    AOS.init({});
    window.dispatchEvent(new Event('resize'));
}

function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}


// Preload Animation
function pageTransition_init() {

    var tl = gsap.timeline();

    tl.set(".footer-main", {display: "none"});
    tl.set(".logo-img-pre", {y:100});
    tl.set(".loading-screen", {bottom: "-100%", opacity: 1});

    tl.to(".loading-screen", {duration: 1.7, height: "100%", bottom: "0%", ease: "Expo.easeInOut",});
    tl.to("#video_home_top video", {duration: 0, display: "block"});
    tl.to(".header-main", {duration: 0, display: "block"});
    tl.to(".footer-main", {duration: 0, display: "block"});
    tl.to(".logo-img-pre", {duration: 0.7, delay:-0.7 , y:0, opacity:1, ease:"power4",});
    tl.to(".loading-screen", {duration: 1, delay:1, height: "100%", bottom: "100%", ease: "power4",});
    tl.to(".logo-img-pre", {duration: 0.3, delay:-1, opacity: 0, display:"none"});

    return tl;
}

// Transition Functions
function pageTransition() {
    var tl = gsap.timeline();

    tl.set(".loading-screen", {bottom: "-100%", opacity: 1});

    tl.to(".loading-screen", {duration: 1.2, height: "100%", bottom: "0%", ease: "Expo.easeInOut",});
    tl.to(".loading-screen", {duration: 1, height: "100%", bottom: "100%", ease: "Expo.easeInOut",});

    return tl;
}

function load_video() {
    const list_videos = document.getElementsByTagName("video");

    for (var i = 0; i < list_videos.length; i++) {
        list_videos[i].load();
        console.log(list_videos[i].readyState);

    }
}

jQuery(document).ready(function ($) {
    "use strict";

    jQuery('html, body').animate({scrollTop:0});

        var masterTimeline = new gsap.timeline();
        masterTimeline
            .add(pageTransition_init())
            .add(video_text_animation(), "-=1");

        $(function () {
                barba.init({
                    sync: true,
                    transitions: [
                        {
                            async leave(data) {
                                const done = this.async();
                                pageTransition();
                                await delay(1000);
                                done();
                            } ,
                            enter(data) {
                                jQuery('html, body').animate({scrollTop:0});
                                load_video();
                                var tl = gsap.timeline();
                                tl.set("#video_home_top video", {duration: 0, display: "block"});

                                tl.to(".header-main", {duration: 0, display: "block"});
                                tl.to(".footer-main", {duration: 0, display: "block"});
                            }
                        },
                    ],
                    views: [{
                        namespace: 'index',
                        beforeEnter(data) {
                            document.body.classList.add("oxy-overlay-header");

                            add_scripts();
                            switch_footer();
                            animation_scroll_text();
                            video_animation();
                        },
                    }
                });
            });
});

Screen Shot 2020-08-17 at 14.42.35.png

Link to comment
Share on other sites

Hey maxou_1403 and welcome to the GreenSock forums. 

6 minutes ago, maxou_1403 said:

on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. 

That's definitely because of the videos. You're loading 46.12mb in just one video! 11.65 and 3.29mb in two other videos. That is going to kill people's data usage and be slow to load. Most likely why it runs faster in Chrome is because the videos are cached or something. You're definitely going to see the most improvement on site load time by getting those file times down as much as possible (or using some alternative approach depending on the nature of your videos). 

 

Side note: This doesn't make much sense because your newly created timeline will never have a ScrollTrigger:
 

let tl = gsap.timeline();

if (tl.scrollTrigger) {
  tl.scrollTrigger.kill();
}

 

I also recommend reading the most common GSAP mistakes article because you made a couple of them :)

 

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Hey maxou_1403 and welcome to the GreenSock forums. 

That's definitely because of the videos. You're loading 46.12mb in just one video! 11.65 and 3.29mb in two other videos. That is going to kill people's data usage and be slow to load. Most likely why it runs faster in Chrome is because the videos are cached or something. You're definitely going to see the most improvement on site load time by getting those file times down as much as possible (or using some alternative approach depending on the nature of your videos). 

 

Side note: This doesn't make much sense because your newly created timeline will never have a ScrollTrigger:
 


let tl = gsap.timeline();

if (tl.scrollTrigger) {
  tl.scrollTrigger.kill();
}

 

I also recommend reading the most common GSAP mistakes article because you made a couple of them :)

 

 

Thanks a lot, I'll try to fix my GSAP mistakes before I found solution on my videos. :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...