Jump to content
GreenSock

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


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 54 results

  1. 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.
  2. 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
  3. 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!
  4. 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?
  5. 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!
  6. Lagden

    Bug Safari 9.1

    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.
  7. 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!
  8. 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.
  9. 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).
  10. 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.
  11. 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/
  12. 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
  13. 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
  14. 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).
  15. 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?
  16. 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.
  17. 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
  18. 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
  19. 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!
  20. 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
  21. 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.
  22. 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.
  23. 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.
  24. 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
  25. 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}));
×