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. Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?
  2. 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
  3. Hi everyone, The issue here seems to be with the shifting of the background images on slide in / out. In the functions slideIn and slideOut I've commented out the lines of code that shift the background images. With this code removed everything works fine on all browsers. Un-commenting the code adds the image shifting and on Chrome and Firefox, everything works fine with the shifting added. On Safari however, it appears to kill the other tweens that scale the SVG clipping path and do the SplitText animation. Have a look and see what you think. I'm assuming I've made a mistake but then I'd also assume I'd have an issue in other browsers. (Feel free to critique my code as well )
  4. Hey, This is my first post on the forum, loving gsap! I've ran into a little bit of an error. I have an SVG clip-path that I wan't to perform a simple scale animation on when in the viewport but for some reason it does not want to run in safari, I'm fairly new to gsap so don't have much experience troubleshooting SVG animations, so any help would be appreciated, cheers! NOTE: I've not included the scrollTrigger library on the codepen just so you don't have to scroll to play the animation, the bug still stands.
  5. 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.
  6. 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
  7. 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
  8. 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!
  9. 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});
  10. 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!
  11. 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.
  12. 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
  13. 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
  14. 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!
  15. 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?
  16. 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?
  17. 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
  18. 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
  19. 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!
  20. Hi, This pen works on Chrome, FF, Opera… but nothing moves in Safari. Any idea ? b.
  21. 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.
  22. 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!
  23. 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
  24. 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!
  25. 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/
×