Search the Community
Showing results for tags 'safari'.
Found 71 results
-
I did a quick hourglass spinner using an SVG graphic. It looks great in OSX Chrome and animates just fine. But the positioning seems to be off in Firefox & Safari. Is there a known issue with SVG positioning cross browser? Or possibly with transform-origin? Codepen is here: http://codepen.io/Bangkokian/pen/ZbZmmw (View in Chrome first to see the working version).
-
I first tried using CSS, but when I was informed that it looks buggy on Safari, I tried with Greensock to see if it fixes it. It still has the same issues, but ONLY on Safari. After a bit of research I saw it discussed on StackOverflow as a Safari bug. The bug is: while doing the transition, half of the element seems to transition differently than the other half. It shows a line in the middle, like if the element was made of paper and was bending in half. Is there any way around it? I presented a few animations to the client, but this animation (rotateY) was the unanimous selection. Note: I am somewhat new to Javascript and Greensock. You may notice better ways to do what I did. I wouldn't mind suggestions on improving it, but what I am really after is a solution to the bug/glitch. Thank you for your time.
-
Hello all. I have been using your fine library to animate a set of banner ads for a client going live soon. Fairly late in this process, a team member discovered a 1 pixel jitter or wiggle only in Safari. We are using Google DoubleClick, and we also have a private viewer to show clients ads. In both cases, after uploading these animated ads, in Safari the ad will shift back and forth by about one pixel while elements in it are animating. To phrase it in a different way, when the ad is on a page within an iFrame, the iframe or possibly the container it's in shifts side to side in a wiggle by about one pixel. The animations display slightly differently in Safari as opposed to Chrome. This is not as significant as the jitter. This has been found in Safari Version 9.0 in OSX El Capitan and Yosemite. I stripped the ad of any client-specific images, text, or information and uploaded it to CodePen to try and isolate what's going on. I also had to strip out all the DoubleClick specific code because CodePen would not allow it to run with that code. I really have to apologize because this is very ugly at the moment as I try to debug this. So far I have not been able to get the iframe to jitter in CodePen. However in the "Details" view, the animation is affecting the font weight of the page header text! I feel like this is related. I am at wits end. I'm hoping that if you look at it here and can understand why the font is changing during animation, it will help me understand why the ad is affecting its container during animation in Safari. EDIT: To be clear, right now the behavior I'm asking for help debugging is in CodePen, that the font weight of the header in the top left is flickering during the animation of my banner ad. I think this must be caused by the same thing that is making it jitter in Google DoubleClick preview and in our internal adviewer page, which also uses iframes. Any help would be much appreciated. Best, Stephen Link: http://codepen.io/stevium/details/WQdEyG/
-
Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks
-
tl;dr: TweenMax + Safari can't read the value of perspectiveOrigin, can set it just fine. Hi, happy customer and big fan here. I'm working on a project where I'm trying to tween the perspective-origin CSS property. It works just fine as long as I TweenMax.set() it, but it breaks in Safari when I change it to TweenMax.to(). Both scenarios work in Chrome. It looks like TweenMax is unable to READ the property's current value when in Safari, which it needs for calculating the tween. It is able to WRITE the value though. If you take a look at my Codepen, switch the method to "to", move the mouse and then hold still for a bit you'll see that the value gets set to the tween's end value as soon as the tween ends. Which is also why TweenMax.set() works just fine, because it doesn't need to read a value, only set it. Any idea how I can get around this without manually checking for browsers and juggling with vendor prefixes? Thanks a bunch, Franz
-
I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).
-
First check this link in Chrome, Firefox and Safari: Jug Bug Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo(). Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties. I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?
-
https://dl.dropboxusercontent.com/u/34687130/work/kynan/tiles/index.html On Safari (or iOS Safari) notice how one tile is over the top of another when it shouldn't be. When I disable perspective, this issue does not occur. I have tried changing the zindex at the correct place, as well as the Z 3D property. Nothing seems to work. Is this a known issue? Thanks.
-
Hi, I have some issue since the last update with "-webkit-" Not sure this bug has been fixed FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.I make a simple TweenMax.to('element', 1, {className: "+=active"}); and bam ! http://codepen.io/stephanedemotte/pen/bNRXYO Only on Safari and Chrome. Everything good with gsap : 1.15.0
-
Hello everybody First of all, thanks for the great animation library! I've just started working with TweenMax and I must say that it is really easy and intuitive to use, great job! Now to my little problem that I have: Whenever I run a repeating rotation tween on a DOM element (lets call it X), every now and then, when i remove the tweened element and append another element (lets call it Y) to the DOM, Safari does not refresh it's viewport, instead, it is just showing the element X without animation, until I scroll or click the mouse, then it shows element Y. This does not seem to happen when I use CSS3 animations, it also does not happen when I do not tween the element with TweenMax. Running on OSX 10.9.5 and Safari 7.1 (other browsers seem to work without issues). To reproduce it, you will need to download the standalone CodePen example (don't run it inside CodePen) or download the attached file. Then just open it with Safari and keep refreshing until you encounter the problem (might have to refresh 30 times or more). I do not know if this is a Bug in Safari or in TweenMax... Your help would be very much appreciated! Thanks a lot nuCpv.zip
-
I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur. Can anyone help me? This is the site: www.krawczuk.com.br / koletivo-creative. Thank you!
-
Hi, I've just stared working with GS in Javascript and so far love the ease of use and its flexibility. However, after testing my animations in different browsers, I've been encountering problems with certain parts. Everything was working great in Chrome, but Safari and Firefox seems to render things differently, such as elements that are misplaced in Firefox, or some that don't even show up in Safari. Any idea what can be causing these compatibility issues? Please, check the link below: http://jsbin.com/ferin/19/edit Thank you
-
I am currently building a website that utilizes gsap js and scrollmagic to create a parallax effect. It works perfectly in most browsers and I even got it to be responsive. However I noticed an issue with Safari 6 on Mac OSX where the animation still 'technically' works but is extremely glitchy. You can see what I mean here: http://adm-rhino.unl.edu:82/why-college/ Any ideas on a solution or where the problem stems from would be a great help.
-
Hi, I'm using version 1.10.3 of TweenMax for multiple animations on my site. I'm using the scrollTo plugin on my main menu to smoothly scroll to different anchors on the page. I have tween animations on each section to show the content when the section scrolls into the viewport (triggered the first time the section scrolls into view only). The problem is that when any section scrolls into view and its animation is triggered, the page stops scrolling. It appears that the scrollTo tween is aborted by the new animation. * I logged the target anchor position before starting the scrollTo animation, and it was being correctly reported. * I added an onComplete function to the scrollto that logged the page's final scrollTop position, and every time I tried to scroll to a section with other animations above it (thereby triggering them "on the way"), this function wouldn't run. * Once all sections had been viewed (and all tweens triggered), I could correctly navigate through the page using the menu (and my test logging function ran correctly). This only happens in Safari - all animations are correctly triggered and completed in Chrome, Firefox and IE. Advice/suggestions welcome. For the moment I'm using a different library for my scrollTo function. -
Is there a known issue of the ColorMatrixFilter plugin not working in the Safari browser? I am using the plugin to colorize two images, and it works in both Firefox and Chrome, but not Safari.
-
Hey so i'm not sure if this is a greensock bug or a browser bug or me just pushing the limits too much, but what i have noticed on a couple projects i've started lately is that where i may have a bunch of tweens going on successfully in Chrome or Firefox, that when i test in Safari or on my iPhone, the animations dont seem to fully update visually. if i resize the window or anything like that, the screen corrects itself. where i've run into it, the problem doen'st happen if only 1 or two things are tweening at once, but if a more than a handful are tweening at once, it seems that the browser cant keep up or something. if you zoom in or out or rotate the screen or something to get the browser to react, the end of the animation will rectify itself after its been messed up. even with the window resize listener turned off. you can check out one project currently in progress where you can view this. to see them problem, in safari or on iphone open the link, then click between "bird" and "big bang". you will see that the divs and the nav elements will linger in Safari and iOS, yet not in Firefox or Chrome. if you step across the nav one at a time, (big bang, liquid, snakes, globe, wedges, candle, bird...) then it tweens fine in all browsers. http://danehansen.com/temp/gs
-
Adding autorotate to my bezier curve stops it from working in Safari (5.1.7) It just pins around in one spot and doesn't follow the curve. Removing the auto rotate parameter fixes it. Anyone any ideas?! Can't find anyone with this problem and not sure what to do about it, I really need it to auto rotate with the curve. Works in all other browsers! var anim = new TimelineMax(); anim.append(TweenMax.to($('#anim'), 2, {css:{bezier: {values: [{left:'3578px', top:'2417px'},{left:'3431px', top:'2362px'},{left:'3190px', top:'2252px'}], autoRotate: true}}, ease: Linear.easeNone}));
-
I'm experiencing a problem only on ios, Safari and Dolphin. When the page first loads, the TimelineMax animation will not play. If I tap somewhere on the screen (not on a button) or reload page, everything plays. I cannot seem to figure this out and I have tired rearranging the order of the way the page loads and to no avail, nothing works unless I reload the page or tap on the screen in a random spot. I checked the console.log and no issues. I could really use a bit of help on this one. URL: Works on: DESKTOP: Safari, Chrome, FF and Opera Broken on: iOS: Safari and Dolphin
-
Hey Everyone, I'm not sure if anyone else has run into this yet, but I developed a game using JS Tweenlite for a Safari browser for an iOS device. After I upgraded my iOS from 5 to 6, the Tweenlite doesn't seem to run, neither Safari on iOS 6 or Chrome on iOS6, everything works just fine on both browsers on a device running iOS5. Hoping to find a solution from you guys. Thanks much!
-
Hello Rockstarrs, I wrote this dynamic mp3 visualizer almost a year - and it worked wonderfully. Then recently I went back to it and it stutter steps and drops frames. The only things that have changed on my end, Mountain Lion (but i noticed it even before with Lion), FP11.3. So I recompiled the SWF, opened the SWF and everything as fine! Then opened it in the browser - same issue… Uninstalled Flash Player, reset Safari, Chrome, FireFox, repaired disk permissions systemwide, reinstalled Flash - no love. Made sure I had the most current version of GreenSock and swfObject, still nothing better... Attached are screenshots of exactly what I'm talking about, and here's a link to the project live. Let me know if you're seeing everything correctly, or if yours, like mine is slicing and dicing the visual... http://joelhackney.name/spectrum/ Thanks! -Joel
-
This work in IE, Safari, Opera, Chrome but NOT in Safari. Any advice? <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="TweenMax.min.js"></script> <style type="text/css"> body { margin:0px; } p{ background-color:#ff0000; width:300px; padding:2px; text-align:center; position:absolute; } </style> <script type="text/javascript"> var rullaPa; var rullaAv; var pElementet; function testar() { pElementet = document.getElementById("p1"); pElementet.addEventListener("mouseover", rullaPa, false); pElementet.addEventListener("mouseout", rullaAv, false); } function rullaPa() { TweenMax.to(p1, 2,{css: {width:"400px"}}); document.getElementById("p1").innerHTML = "Rullat på"; } function rullaAv() { TweenMax.to(p1, 2,{css: {width:"300px"}}); document.getElementById("p1").innerHTML = "Rullat av"; } window.onload = testar; </script> </head> <body> <p id="p1">Byt text med olika JavaScript händelser</p> </body> </html>
