Jump to content
GreenSock

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

Search the Community

Showing results for tags 'safari'.

  • 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

  1. Anyone have a fix for blurry text in Safari when it scales up? Safari does the same thing to SVGs but I found if I slightly change the rotation with an onUpdate that fixes the issue. SOLVED - see my post below.
  2. Hey guys, I´m having an issue on Safari when I try to transition some properties into a <linear Gradient>. I'm using Next.js, but I leave here a minimal codepen to replicate the issue. Also, I leave some videos to show the error. In Chrome and Firefox works fine, just fail in Safari (Version 13.1.1). I'm getting this error (TypeError: Attempted to assign to readonly property.) Maybe anyone who had this error can help me! thanks in advance. chrome.mov safari.mov
  3. Hi guys, I've an issue with Safari rendering when I use MorphSvg Plugin to change SVG path of a mask. With other browser I've no problem, but with Safari Desktop (monitor over 1920x1080), and Safari Mobile, the SVG morphing animation is not fluid. I'm using the scrollPlugin, but also without that integration the result is the same. Any ideas? Thanks to everyone. safari-rendering-issue.mp4
  4. 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 s
  5. 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' i
  6. 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 myse
  7. 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.
  8. 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
  9. 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.1.40.1.4)). 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
  10. 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!
  11. 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?
  12. 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?
  13. 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
  14. 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 o
  15. 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
  16. 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
  17. Hi, This pen works on Chrome, FF, Opera… but nothing moves in Safari. Any idea ? b.
  18. 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.
  19. 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!
  20. 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
  21. 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!
  22. 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)
  23. 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.
  24. 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)
  25. 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-thin
×