Webdesignwiljan

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.

Hi, I'm creating an animated website with scrollMagic and I'm using the following animations: <a href="http://www.scrollmagic.io/examples/expert/bezier_path_animation.html">http://www.scrollmagic.io/examples/expert/bezier_path_animation.html</a> <a href="http://www.scrollmagic.io/examples/advanced/svg_drawing.html">http://www.scrollmagic.io/examples/advanced/svg_drawing.html</a> <a href="http://www.scrollmagic.io/examples/basic/simple_pinning.html">http://www.scrollmagic.io/examples/basic/simple_pinning.html</a> 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? The website is http://wordpress.webdesignwiljan.nl 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); }