Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxou_1403

Slow loading on Safari but good in chrome

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 post
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 post
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 post
Share on other sites

As a bit of general advice if possible you might want to host your videos somewhere like youtube, vimeo etc. Then they can stream and don't need to be preloaded, and you use their bandwidth not your hosting server's.

 

 

  • Like 2
Link to post
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.

×