Search the Community

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