Jump to content
Search Community

Slow multiple animations in safari

Webdesignwiljan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

Hi,

 

I'm creating an animated website with scrollMagic and I'm using the following animations:

 




 

It's an onepage website so I'm using them all at once.

But when I run the examples on the scrollMagic website in safari there running as smooth as possible.

 

But then when I run the website I'm working on, I have to wait something like 10 seconds before even something appears.

Then I wanna scroll, cuz that's when the magic comes in. u see what I did there?

But then when I scroll, the new content also loads only after too many seconds

 

Can somebody tell me why and what I'm doing wrong?

 


 

I'm also placing divs as stars in the sky, already removed it and it didn't make a difference

I'm also drawing an live canvas clock even just a simple jQuery fadeIn takes too long..

 


var map1, map2, map3, map4, map5 = null;
    var browser = null;
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';
    // At least Safari 3+: "[object HTMLElementConstructor]"
    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;
    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;
    // Blink engine detection
    if (isOpera) {
        browser = "animations";
    } else if (isFirefox) {
        browser = "animations";
    } else if (isSafari) {
        browser = "animations";
    } else if (isIE) {
        browser = "animations";
    } else if (isChrome) {
        browser = "animations";
    } else {
        browser = "animations";
    }
    window.alert(browser);
    
    document.body.className = browser;
    
    $(function () { // wait for document ready
        $(".loading-view").delay(1000).addClass("loaded");
    
        var nightSky = document.querySelector(".nightSky");
        var cloudSky = document.querySelector(".cloudSky");
        var SkyWidth = nightSky.offsetWidth;
        var nightSkyHeight = nightSky.offsetHeight;
        var cloudSkyHeight = cloudSky.offsetHeight;
    
        window.onresize = function () {
            SkyWidth = nightSky.offsetWidth;
            nightSkyHeight = nightSky.offsetHeight;
            cloudSkyHeight = cloudSky.offsetHeight;
        }
    
        var placeStars = function () {
            var stars = 1000;
    
            for (i = 0; i < stars; i++) {
                var x = Math.floor(Math.random() * SkyWidth);
                var y = Math.floor(Math.random() * nightSkyHeight);
                // console.log("x: " + x + " | y: " + y);
    
                var star = document.createElement("div");
                star.className = "star";
                star.style.left = x + "px";
                star.style.top = y + "px";
    
                nightSky.appendChild(star);
            }
        }
    
        var placeClouds = function () {
            var existingClouds = cloudSky.querySelectorAll(".cloud");
            var maxClouds = 10;
            var clouds = 3;
            var cloudSizes = 5;
            var cloudIndexes = 5;
    
            for (i = 0; i < clouds; i++) {
                if (existingClouds.length < maxClouds) {
                    var duration = Math.floor(Math.random() * (120 - 50 + 1) + 50);
                    // var x = Math.floor((Math.random() * SkyWidth) + 1);
                    var y = Math.floor((Math.random() * cloudSkyHeight) + 1);
                    // console.log("x: " + x + " | y: " + y);
    
                    var cloud = document.createElement("div");
                    cloud.className = "cloud";
                    cloud.style.animationDuration = duration + "s";
                    console.log(duration);
                    // cloud.style.left = x + "px";
                    cloud.style.top = y + "px";
    
                    var cloudSize = Math.floor((Math.random() * cloudSizes) + 1);
                    switch (cloudSize) {
                        case 1:
                            cloud.className += " cloudBig";
                            break;
                        case 2:
                            cloud.className += " cloudNormal";
                            break;
                        case 3:
                            cloud.className += " cloudSmall";
                            break;
                        case 4:
                            cloud.className += " cloudNormal";
                            break;
                        case 5:
                            cloud.className += " cloudSmall";
                            break;
                    }
    
                    var cloudIndex = Math.floor((Math.random() * cloudIndexes) + 1);
                    switch (cloudIndex) {
                        case 1:
                            cloud.className += " front";
                            break;
                        case 2:
                            cloud.className += " mid";
                            break;
                        case 3:
                            cloud.className += " behind";
                            break;
                        case 4:
                            cloud.className += " mid";
                            break;
                        case 5:
                            cloud.className += " behind";
                            break;
                    }
    
                    cloudSky.appendChild(cloud);
                    console.log("New cloud");
    
                    existingClouds = cloudSky.querySelectorAll(".cloud");
                }
            }
        }
    
        if (browser != "no-animations") {
    
    
            setInterval(function () {
                placeClouds();
            }, 20000);
    
            // Mountain Bike scroll animation
            var bikepath = {
                start: {
                    curviness: 1.25,
                    autoRotate: true,
                    values: [
                        {x: 0, y: 250},
                        {x: 300, y: 260},
                        {x: 550, y: 230},
                        {x: 800, y: 290},
                        {x: 1100, y: 330, scaleX: 1, scaleY: 1},
                        // {x: 900, y: 80},
                        // {x: 1300, y: 60},
                        // {x: 1500, y: 30},
                        {x: 1800, y: 100, scaleX: 0.5, scaleY: 0.5},
                        // {x: 2004, y: 85},
                        {x: 2100, y: 70}
                    ]
                }
            };
            // init controller
            var controller = new ScrollMagic.Controller();
            var controller2 = new ScrollMagic.Controller();
    
            // create tween
            var tween = new TimelineMax()
                .add(TweenMax.to($("#mountainbike"), 9, {css: {bezier: bikepath.start}, ease: Power1.easeInOut}))
            // .add(TweenMax.to($("#mountainbike"), 4, {css: {bezier: bikepath.end}, ease: Power1.easeInOut}));
    
            // build scene
            var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 1300, offset: 100})
                .setPin("#target")
                .setTween(tween)
                // .addIndicators({name: "Bike bezier"}) // add indicators (requires plugin)
                .addTo(controller);
    
            var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 650, offset: 500})
                .setPin(".earth")
                // .addIndicators({name: "earth (duration: 100)"}) // add indicators (requires plugin)
                .addTo(controller2);
    
            var scene3 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 650, offset: 500})
                .setPin(".sky")
                // .addIndicators({name: "sky (duration: 100)"}) // add indicators (requires plugin)
                .addTo(controller2);
    
    
            // ANIMATING LOGO PLANT
            function pathPrepare($el) {
                $el.css("stroke-dasharray", 2000);
                $el.css("stroke-dashoffset", 2000);
            }
    
            var $base = $("path#base");
            pathPrepare($base);
            var controller = new ScrollMagic.Controller();
    
            var tween = new TimelineMax()
                .add(TweenMax.to($base, 0.9, {strokeDashoffset: 0, ease: Linear.easeNone})) // draw word for 0.9
                .add(TweenMax.to("path", 1, {stroke: "#286f2d", ease: Linear.easeNone}), 0); // change color during the whole thing
            var scene = new ScrollMagic.Scene({triggerElement: "#logoTrigger", duration: 400, tweenChanges: true})
                .setTween(tween)
                // .addIndicators() // add indicators (requires plugin)
                .addTo(controller);
    
        } else {
            $('body').append("<i class='fa fa-info info-btn'></i>");
            $('i.info-btn').on('click', function () {
                alert("Voor een optimale ervaring raden wij u aan deze website in Chrome of Firefox te bekijken.");
            });
        }
        nightSky.onload = placeStars();
    
        // $('#openProject.tree').on('click', function () {
        //     var id = $(this).data("id");
        //     $('body').addClass("locked");
        //     $(".projectDetailsContainer .projectDetails[data-id="+id+"]").addClass("open").fadeIn(function() {
        //         // MAPS
        //         var map = new GMaps({ div: "#map"+id, lat: -12.043333, lng: -77.028333 });
        //         map.setCenter(-12.043333, -77.028333);
        //         map.addMarker({
        //             lat: -12.043333,
        //             lng: -77.028333
        //         });
        //
        //         $(window).resize( function () {
        //             map.refresh();
        //             map.setCenter(-12.043333, -77.028333);
        //         });
        //     });
        // });
    
        $('#closeProject, .projectDetails:after').on('click', function () {
            $(".projectDetailsContainer .projectDetails.open").removeClass("open").fadeOut();
            $('body').removeClass("locked");
        });
    
        $('.cloud.details').on('click', function () {
            $('.cloudSky, .detailedSky .detailedCloud').css("cursor", "pointer");
            $('.nightSky *:not(.star)').fadeOut(1000);
            var id = $(this).attr("data-id");
            console.log(id);
            $('.detailedSky .detailedCloud[data-id="' + id + '"]').fadeIn(1000).addClass('active');
            $('body').addClass('locked');
        });
    
        $('.detailedSky .detailedCloud.active, .cloud.details').on('click', function (e) {
            e.stopPropagation();
        });
    
        $(document).on('click', function (e) {
            $('.detailedSky .detailedCloud').fadeOut(1000);
            $(this).removeClass('active');
            $('.nightSky *:not(.star)').fadeIn(1000);
            $('body').removeClass('locked');
            $('.cloudSky, .detailedSky .detailedCloud').css("cursor", "inherit");
        });
    });
    
    // CLOCK
    
    var canvas = document.getElementById("clock");
    var ctx = canvas.getContext("2d");
    var radius = canvas.height / 2;
    ctx.translate(radius, radius);
    radius = radius * 0.90
    setInterval(drawClock, 1000);
    
    function drawClock() {
        drawFace(ctx, radius);
        drawNumbers(ctx, radius);
        drawTime(ctx, radius);
    }
    
    function drawFace(ctx, radius) {
        var grad;
    
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
    
        grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
        grad.addColorStop(0, '#333');
        grad.addColorStop(0.5, 'black');
        grad.addColorStop(1, '#333');
        ctx.strokeStyle = grad;
        ctx.lineWidth = radius * 0.1;
        ctx.stroke();
    
        ctx.beginPath();
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
        ctx.fillStyle = '#333';
        ctx.fill();
    }
    
    function drawNumbers(ctx, radius) {
        var ang;
        var num;
        ctx.font = radius * 0.15 + "px arial";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        for (num = 1; num < 13; num++) {
            ang = num * Math.PI / 6;
            ctx.rotate(ang);
            ctx.translate(0, -radius * 0.85);
            ctx.rotate(-ang);
            ctx.fillText(num.toString(), 0, 0);
            ctx.rotate(ang);
            ctx.translate(0, radius * 0.85);
            ctx.rotate(-ang);
        }
    }
    
    function drawTime(ctx, radius) {
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        //hour
        hour = hour % 12;
        hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
        drawHand(ctx, hour, radius * 0.5, radius * 0.07);
        //minute
        minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
        drawHand(ctx, minute, radius * 0.8, radius * 0.07);
        // second
        second = (second * Math.PI / 30);
        drawHand(ctx, second, radius * 0.9, radius * 0.02);
    }
    
    function drawHand(ctx, pos, length, width) {
        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.lineCap = "round";
        ctx.moveTo(0, 0);
        ctx.rotate(pos);
        ctx.lineTo(0, -length);
        ctx.stroke();
        ctx.rotate(-pos);    }

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Its very difficult for us to diagnose that amount of code, especially on a live site.

I read through the code and didn't catch anything that looked like an obvious error.

I think you should start by removing / fixing the code causing the console errors and just keep removing functionality until the problem goes away.

Remove the clock stuff and then comment out each ScrollMagic scene one by one.

It definitely looks like something is causing considerable stress for safari but I'm not sure what. 

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Its very difficult for us to diagnose that amount of code, especially on a live site.

I read through the code and didn't catch anything that looked like an obvious error.

I think you should start by removing / fixing the code causing the console errors and just keep removing functionality until the problem goes away.

Remove the clock stuff and then comment out each ScrollMagic scene one by one.

It definitely looks like something is causing considerable stress for safari but I'm not sure what. 

 

Thank you Carl, for your comment. I removed every functionality, part by part. But when all the JavaScript was commented, it helped nothing.. So I started searching for slow css animations on safari and then I found this next post:

 

http://stackoverflow.com/questions/6481894/proper-way-to-optimize-css-3-animations-for-ios-mobile-safari

 

They said there that I should use:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

By the divs that get animated but also in the keyframe animations. Replacing my keyframe properties with this fixed it! :)

So there was nothing wrong with the JavaScript.

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...