Jump to content

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

Search the Community

Showing results for tags 'safari'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • FAQ Landing Page


  • Examples
  • Showcase


  • Products
  • Plugins


  • Learning Center
  • Blog


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 54 results

  1. Hey guys. I just launched my new website. All my vanilla JS animations are super smooth. And my GSAP animation is smooth in every other browser like Firefox, and Chrome. But in Safari it is super laggy, like instead of being smooth is clips 4 times, so it increases 25% each time. None of my other elements does this, so I do not think that this is a general problem on the site. And the animation is like super subtle so I can't see why it would cause such a lag. I am new to GSAP. I put a codepen URL, I haven't pasted the whole styling in, but I pasted all the GSAP js in so you can get a sense of what I have done. UPDATE: I found a solution, it was a Lottie animation who were interfering with the animation, thanks for the help!
  2. Hi ladies and gents. Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it 😘 https://theswirlytrain.com Here is a video example of what is happening. // start animation at top of page function scrollTop() { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } window.scrollTo(0,0); } const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop }); tl.set('article', {autoAlpha: 1}); tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3}); tl.from('.home .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1}); tl.from('header', 1, {autoAlpha: 0, delay:-0.5}); tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});
  3. Hey, First time posting so hope i'm making myself clear and not breaking any rules :). But i have no idea what i could be doing wrong (yet). Been working on a banner ad in which masked svg elements are animated: No trouble with Chrome or Firefox. But when i rotate a div element with an masked svg inside it, the mask takes a bigger size in Safari. I've added an event listener to not have to refresh every time to see my precious yoghurt rotate ;) Can anyone point me in the right direction what could be a solution? Not sure if this is Greensock related, if not, i'll show myself out :). Thanks anyway!
  4. Good day, Can someone help me solving the issue? Have been looking for multiple solution and i don't want to end up using javascript safari hacks. My sample pen works in other browsers but safari. Many thanks in advance.
  5. Hey, When I display an animtion in an iframe, the whole content jumps up 1 px while animating, and then jumps down again when done. I've only observed this behavior in Safari on desktop. (I've tried other people's animations as well with the same result.) Does anybody have any idea why it does this, and how to make it not to? http://skalpell.se/clients/ellermore/test/ Plz halp
  6. themepunch

    New Safari Bug

    Hi Folks, When GreenSock write matrix3d on CSS Transform based on force3D / Perspective / TransformOrigin the clip-path css attribute animation just break in the Latest Safari (12.1 (14607. See our Example above in SAFARI Latest Version, or on any iOS latest version !! . Click on Working and Not Working version to see the Effect. The only Different between those functions are the "force3d:true" setting ! Hope you have a good idea for this ? Thank you, Krisztian from ThemePunch
  7. Hi, So this is a simple rotation animation that works well on all browsers but Safari. Can't figure out why this is happening. Any ideas? (Chrome for desired results, Safari for wrong ones) Thanks!
  8. I am animating letterforms of a font with wide and condensed shapes, i.e. interpolating between the letterform’s widest and most condensed states with TweenMax.to(). The SVG-Vectors animate smoothly in Firefox, however in Safari and Chrome the movement looks very shaky. Am I doing it wrong? And more importantly, are there ways to prevent this?
  9. I am seeing this strange rendering issue in Safari when attempting to run an animation with my CTA button. Upon animating the solid orange background color can flicker or change to blue or stripes. The button pulls the text & colors externally before animation runs. I center the cta button text using transform:translate(-50%, -50%) and if i remove this the error goes away. Placing force3D:true helped some, but not completely. Any ideas on how to resolve this conflict?
  10. Hi guys, I'm running into an issue on Safari with a function I've created that uses the _next, and _prev properties on a tween object. Here's the code: const copy = new SplitText('.copy-' + i, {type:'chars, words', charsClass:'chars'}) tl.staggerTo(copy.chars, staggerDuration, {onStart: caretForward, onStartParams: ['{self}']}, staggerDuration, label) function caretForward(tween) { if (tween._prev) { TweenMax.set(tween._prev.target, { borderRight: 'none' }) // this removes the caret for the previous character // tween._prev is always null when called in Safari } TweenMax.set(tween.target, { autoAlpha: 1, borderRight: borderStyle }) // this adds the caret for the current character if (tween._next === null) { // tween._next is also always null when called in Safari blink(tween.target) } } I'm creating a typewriter effect whereby the caret is created (by adding a borderRight to the character) in the onStart callback, and subsequently removed using the _prev property in the following tween. This works in every browser (including IE), however the _prev property seems to be always 'null' in Safari. Does anyone have any ideas on what could be causing this? Any help would be greatly appreciated! Thanks, Ryan
  11. Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
  12. Hi guys been trying to make an animation for work where there is an image that goes from left to right with a clipping path to make the image have some sort of cut on the top. My problem is that it doesn't work on safari but somehow works on every other browser even firefox. I linked all the assets needed in the same folder to make the animation. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{clip-path: url(#clip1); position: absolute; top: 0; left: 0;} #svg-defs {position: absolute; width: 0px;height: 0px;} </style> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <body> <svg id="svg-defs"> <defs> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </defs> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" src="bg_01.jpg" width="160" height="600"/> </div> </div> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> var start = 0.1; var trans = 0.3; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); tl1.from('#mask1', trans, { x: -170,y: -35,ease: Power1.Out}) tl.to([tl1], start, "sequence", "-=0.45") </script> </body> </html> That was the original code. I made the animation slower and tried all i can to fix it on this code but some reason the only way it seemed to work is if i constantly resized the browser. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <style type="text/css"> #bg01 img{ /* clip-path: url(#clip1); */ -webkit-clip-path: url(#clip1); position: absolute; top: 0; left: 0; } body{ width: 200px; height: 800px; } #myAd{ width: 200px; height: 800px; } .svg-defs {position: absolute; width: 0px;height: 0px;} </style> <!-- <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> --> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> function resize(){ console.log("tick"); window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 requestAnimationFrame(function(){ console.log("requested") }) } function main(){ // TweenLite.ticker.useRAF(false); // TweenMax.lagSmoothing(1000, 16); var ad = document.getElementById('myAd'); var mask1 = document.getElementById('mask1'); var img = document.getElementById('img1'); function update(){ console.log(img) // console.log("tick"); // window.dispatchEvent(new Event('resize')) } setInterval(update, 1000); // TweenMax.ticker.addEventListener("tick", update); var start = 0.1; var trans = 5; var bg1_time = 3; var tl = new TimelineMax(); var tl1 = new TimelineMax(); var mask1 = document.getElementById("mask1"); var clip1 = document.getElementById("clip1"); var ad = document.getElementById("myAd") tl1.from(ad, 10, { x: 0,y: 0 }) tl.from(mask1, trans, { x: -170,y: -35,ease: Power1.Out}) // tl1.from(mask1, trans, { // x: -170,y: -35,ease: Power1.Out}) // tl.to([tl1], // start, // "sequence", // "-=0.45") // TweenMax.ticker.removeEventListener("tick", update); } </script> </head> <body onLoad="main();" onResize="resize();"> <svg class="svg-defs"> <clipPath id="clip1"> <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/> </clipPath> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" class="" src="bg_01.jpg" width="160" height="600"/> </div> </body> </html> TweenMax.min.js mine_testing for browsers.html
  13. Hi gsap people, So I'm a bit at a loss. I did a ton of research to find the best "cross compatible" way to reveal a background image on scroll. Basically it works as intended on chrome in the codepen, a more clear example is above the fold to scroll on https://bell.works/work but you can for sure see it in the codepen. Just some notes - TLDR maybe using svg injector to load the svg circles except for the clippath SVG mask which is inline i'm using objectBoundingBox for the clipPathUnits, otherwise the size of the circle on load less easily controlled, and then I had to tween the attributes of the SVG mask ellipse to get it sized right so it wouldn't be an oval based on browser width, e.g. var relWidth = $("#site-header-area").width(); var relHeight = $("#site-header-area").height(); var $rX = relHeight / relWidth * 0.5; TweenMax.set("#circle-mask", { attr: {cx:0.5, cy:0.6, ry: 0.5 * 0.75 , rx: $rX * 0.75 }, transformOrigin:"center center"}); for the live url https://bell.works/work the mask works like the codepen and intended, but doesn't tween on scroll, BUT if you go to the bottom of the page and back up, it tweens it all open, and then doesn't close it back up like on chrome - does that make sense? it's like there's a big delay in any calculations but it is working, just not bound to scroll I've read a series of posts about similar issues with solutions that don't really work or help: https://stackoverflow.com/questions/44722751/svg-clip-path-not-working-on-safari this bug https://bugs.webkit.org/show_bug.cgi?id=126207 removing -webkit-clip-path property, which worked for some people on safari 11 for some reason I feel like I went down the rabbit hole on this one. Is there something obvious I'm missing? Is there a better way to do this purely with gsap? Should I just quit altogether and make an SVG that looks like a mask with a hole in the middle and then tween the attributes or scale the whole thing on scroll? Any help would be greatly appreciated!
  14. Hi, This pen works on Chrome, FF, Opera… but nothing moves in Safari. Any idea ? b.
  15. Here is a bug when playing 3d animation. U can see everything in the screenshot and on a simplest pen. I trying to solve the problem for 3hrs already Issue tested only on IOS 10 Safari.
  16. I noticed that very specific to Apple iOS mobile devices using the Safari browser on mobile, using the animation effect marginRight for background elements having a background-image with repeat-x seemed to have a stuttering effect. When viewed in desktop browsers and browsers other than Safari, the stuttering effect on the background repeated element is not seen. Is it because of one of the CSS effects I applied, which is the width != 100%, or is it the way GSAP JavaScript code is written? Please kindly view the Codepen attached. All good helpful feedback appreciated!
  17. Hi, I have this example located: https://smartslider3.com/video-slider/#four When you switch slides - in Safari 11.0.1 the animated slides start the flickering until the animation ends. Do you see any issue on the applied transforms or is it a Safari bug which I should report? I will try to create a Codepen on Monday, but currently I do not have the time for that. What fixed the example: z axis 1px to the slides or rotationX or rotationY 1 deg
  18. I am trying to create floating circular image mask using svg clip-path. It works fine in Firefox and Chrome but Safari somehow cuts off the clipped image. Resizing the browser seems to (temporarily) solve the issue. I have no clue what is going on. Any help would be greatly appreciated!
  19. hello guys, i have problems with safari because my animations are very slow and in chrome is very fast, Can someone help me with this ? in this moment I use scrollMagic a example of my code !!! let animationParallax = new TimelineMax() .to(".Somos__Header", 20, {y: "-140%", ease: Linear.easeNone}) this.somosScene = new ScrollMagic.Scene({ triggerElement: ".Somos__Container" , duration: '50%', offset: -300 }) .setTween(animationParallax) .addTo(controller) url: http://2017.monoku.com/
  20. Hi. I can't seem to make GSAP run well on Safari. I made a simple example which runs smooth in IE, Chrome, Firefox except for Safari, where it ends up choppy. I've seen this happen not only with GSAP, but js in general, where it just can't refresh fast enough, though I don't know what's that about. I'm fairly new to coding and I would appreciate any help on how to do SVG animation properly for all the browsers. Thank you, Rojus.
  21. There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'. It works great in Chrome, but the position of 'p1-1_abc_1' jumped in safari when the timeline start. Safari: Version 10.1.1 (12603.2.4) Chrome: Version 58.0.3029.110 (64-bit)
  22. Hey everyone! I'm having an issue and I tried to hunt down the solution here to no avail. I think I'm missing a little something and maybe you guys help me past this. Basically it seems like the z-index isn't applying to my animation in Safari correctly. It seems like the z-index doesn't actually get applied until AFTER the animation to that element has completed with GSAP. I've read several things about indexing and Safari when applying certain CSS properties, or not setting the index positions first, etc. I'm just stumped. Basically I have a non-dynamic photo-stacking-rotating-thingy going on here. Top-most photo slides up, gets sent to the back of the photo stack (z-index), then slides behind the rest of the photos, then the whole things just keeps repeating forever. You can actually see the photos start to NOT stack correctly after the first photo shuffle...you have to look at the edges...you'll see it doesn't actually move to the very back. Check out the Codepen. Anyone been down this road? Sincerely appreciate the help in advance! Brian
  23. Hi there! I have this lovely animation working on every browser, except Safari, and I have no idea why. Am running the latest Timeline Max, jquery, etc. and it just will not cooperate. Am guessing somewhere in the HTML, inconsistent tags? Any help appreciated! <html> <body> <svg id="path_svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1919px" height="498px" viewBox="0 0 1140.059 296" enable-background="new 0 0 1140.059 296" xml:space="preserve"> <path fill="none" stroke="#050101" id="flypath" stroke-miterlimit="10" d="M0,13c0,0,84-16,154,21s145,108,173,125s142,80,316,46 s277-19.173,355,9.913S1140.059,291,1140.059,291" /> </svg> <h1>THIS IS THE HEADING</h1> <img src="https://stage.livetext.com/wp-content/uploads/2017/02/Paper_Plane_Shadow.png" id="paperplane" width="150" /> </body> </html> $(function() { //cache the repeated variables var tl = new TimelineMax({repeat:-1}), plane = $("#paperplane"); var bezierData = MorphSVGPlugin.pathDataToBezier("#flypath"); var bezierDataFiltered = []; var path_width = $("#flypath").outerWidth(); var path_height = $("#flypath").outerHeight(); var path_svg_width = document.getElementById('path_svg').getBBox().width var path_svg_height = document.getElementById('path_svg').getBBox().height; $("#path_svg").hide(); var width_enlargement_factor = path_width/path_svg_width; var height_enlargement_factor = path_height/path_svg_height; console.log ("path_svg_width: ", path_svg_width, "path_width: ", path_width, "enlargement_factor: ", width_enlargement_factor); $.each( bezierData, function( key, value ) { value.x = value.x*width_enlargement_factor; value.y = value.y*height_enlargement_factor; bezierDataFiltered[key] = value; //console.log (value.x); }); function PlaneFly(autoRotate) { // bring playhead back to beginning and clear all tweens tl.progress(0).clear() // set the initial rotation to be close to the direction he's headed in .set(plane, { rotation: 0 }); //console.log (bezierData); //tween added to timeline with the specified bezier paths tl.to(plane, 3.8, { bezier: { type: "cubic", values: bezierDataFiltered, autoRotate: autoRotate } //ease for slip-n-slide-like animation wheeee //ease: Circ.easeInOut }); } setTimeout(function(){ PlaneFly(true); }, 5000); }); h1 { font-size: 250px; margin-top: 200px; text-align: center; } svg { /*display: none;*/ #flypath { } } #paperplane { position: absolute; top: 0px; left: 0px; }
  24. 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); }
  25. Hi there, While trying to animation multiple SVG circle I found that interesting bug where if I rotate one of my circle (circle2) to the value -90 it seems to go back at to rotate back to 0deg at the end of my animation. Fun fact, if you replace the value -90deg by -90.06deg it doesn't seems to bug, I would guess there is some rounding involve, it jumps to -91deg. This bug seems to occur only on Safari 10.0.1 Even if I found a temporary fix for my problem I'm still curious on what could be done differently to avoid that bug