Search the Community
Showing results for tags 'safari'.
Found 71 results
-
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?
-
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?
-
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
-
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
-
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! -
Hi, This pen works on Chrome, FF, Opera… but nothing moves in Safari. Any idea ? b.
-
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.
-
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! -
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
-
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!
-
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/
-
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.
-
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)
-
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
-
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; }
-
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); }
-
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
-
Hi, For a yet to be released project i am animating an really big SVG image which has PNG layers and some SVG elements. The entire SVG has a shocking size of 1.8Mb. I am animating the x position of 3 groups containing SVG and PNG elements with: TweenLite.to("#group1", 1, {x:50}) // results in this element style when stopped animating: "transform: matrix(1, 0, 0, 1, 0, 70);" data-svg-origin="307.8999938964844 6.610000133514404" The animations looks smooth enough on very slow Windows machines with Chrome, IE & Edge but on Safari and Firefox it is stuttering and lagging to a point where the website looks to be loading in 1 frame per second. What would be an good alternative or workaround to get it to work smooth across all browsers.
-
Hi, first of all let me say congratulations for your great job, gsap definetly changed my career by now. So... I made a codepen for you isolating one animation of our last website that do not render well on safari. Surprise! On codepen it works perfectly... I'm still writing asking for help but I will understand if you can't or do not want, due to the website has another addons like scrollmagic etc etc. I posted the codepen ( use it as reference on what we want ) and here goes the website: http://brand.uoc.edu. As you can see on Safari absolutely all goes slow and jumping. Any ideas? Thanks in advance and congrats again for the great job! PS: My apologize for the english
-
Hola forum... first time posting... please note I'm about 6 months new to using the JS version of TweenMax and I still am very much learning. I was a TweenMax user over in Flash for YEARS and am VERY grateful for what you've created in JS. You have created a wonderful tool! However, I've got a prob. I haven't put this in codepen as what I'm trying to get working seems to work just fine in straight HTML by itself... including in Safari, my problem browser (link below). A quick description of what I'm doing: I'm using a WP theme ('The Ken' created by Artbees) w/a fullscreen slideshow plugin. The slideshow is primarily images with the exception of one or two slides I'd like to add animated content to (all SVG). The way I load my animation is simply by placing an <iframe> in my slide content. This works beautifully in both Chrome and Firefox... but Safari and any browser in IOS renders my animation painfully choppy (nearly non-existent unless you stare at it closely... so I know it is 'working'!). This is a URL to the actual source being loaded up in the <iframe>... you'll see this runs wonderfully in any browser (including IOS browsers): http://aztacofestival.com/wp-content/themes/ken-child/main-slide-logo.html Here is the final Dev page in question: http://aztacofestival.com/arizona-taco-festival-2016/ There are four slides in the slideshow at the moment. Please click to slide 2—this is the slide in question. This page I'm developing uses TweenMax all over the place and it's working brilliantly (ie: top right 'We <3 Our Sponsors" is TweenMax. The testimonial roll in the boilerplate / footer area when the pages loads is TweenMax, and all the rollovers below the main slideshow (scroll down) are using TweenMax (again, working beautifully in all browsers). Please note that all my animations are triggered via their own functions. I've tried whittling back all my animation to just the main logo scaling and still have the issue (There is a lot going on. I figured the issue may have been that the animations combined are processor intensive... doesn't seem to be the issue as I have reduced this animation to 1 simple item and still have the issue). I'm worried this may come down to a theme issue... it's just that it's only occurring on Safari (and any IOS browser) that has me confused. Something strange you'll encounter in Safari: When you inspect the source via Safari's 'web inspector' the animations all begin to move / work. But only when in the inspector / rolling over the SVG items markup). Thank you in advance for taking a moment!
-
Hi. I have trouble with Safari browser positioning of elements with TweenMax x and y. In all browsers car at this position: But in Safari car at the another position: Code: TweenMax.to("#car", 0.1, {x: 530, y: 262, scale: 0.6, transformOrigin: "50% 50%"}); How to fix it?
-
I'm creating a relatively complex nav layout for a single-page scrolling site using GSAP and ScrollMagic. The "upcoming" page in the navigation tweens upward as you scroll down until it hits the top of the nav, and then a page transition is triggered (which is unrelated to this issue). I've included a stripped-down Codepen with only the Nav - please view it in Full View using Chrome or Firefox to see the effect working properly. The value it's tweening to achieve that effect is relatively complicated - it's top: calc(-100vh + [nav container height] + [2x nav bottom property]) which has the effect of moving each item up but maintaining the same spacing once they're stacked at the top. I know there's an outstanding issue with tweening calc() values that's been on GitHub for a while - you can't tween them unless you first use TweenMax.set to establish the pre-tween calc value. Using that workaround got it to work in Chrome and Firefox, but it's still not working in Safari. Instead Safari waits until the end of the ScrollMagic duration and then simply jumps to the end value. I'm not sure what to do about this issue - I've tested it in Safari and tweening a non-calc value works fine, but I need a calc in order to achieve the effect I want. Any help would be appreciated!
-
Hi, I was testing and I found a problem on Safari 9.1 1.18.2 - ok: http://codepen.io/lagden/pen/PNyLKR 1.18.3 - fail: http://codepen.io/lagden/pen/reqoZY It is the same code, just change GSAP version. Well, I did a downgrade to solve! Basically, in version 1.18.3, matrix isn't working on Safari.
-
Hi guys, I asked this a few months ago, it seems like for some reason it was ignored so I thought I'll bring it back to the attention of the GSAP dev team. The problem here is that when a Draggable SVG element with "svg { overflow: visible }", dragged out into the overflow area of the SVG, draggable is not able to drag it. This currently only happens in Safari. Is this a bug? Here is the post from the past: http://greensock.com/forums/topic/11225-draggable-svg-element-which-is-also-rotatable/#entry50147 I hope this time it gets some attention and is fixed asap. Cheers!
-
Started using GSAP a few weeks ago and I'm loving it. So easy to make amazing animations. So I have an animation for the main page of my website, but for some strange reason, part of it is running backwards in Safari. It starts with a strokeDashOffset animation for the outline, the fades in the fill by raising the fillOpacity. It runs wonderfully on Chrome, but somehow, the first part of the animation runs backwards in Safari. The strokeOffset starts at 0 (i.e. the outline is present), then slides out, and THEN the fill fades in. So only part of the animation runs backwards, not the whole thing. Any thoughts? I'm not familiar with posting on codepen yet, but I can do that soon if needed.
