Jump to content
GreenSock

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

Webdesignwiljan

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by Webdesignwiljan

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

  2.  

    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);    }

×