Webdesignwiljan
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Webdesignwiljan
-
-
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 secondsCan somebody tell me why and what I'm doing wrong?The website is http://wordpress.webdesignwiljan.nlI'm also placing divs as stars in the sky, already removed it and it didn't make a differenceI'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); }
Slow multiple animations in safari
in GSAP
Posted
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:
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.