Search the Community
Showing results for tags 'ios'.
-
I'm using scrollTrigger to animate some videos (.mp4) on scroll. Everything seemed to work fine, except that it doesn't seem to work on iOS (I tested on iPhone 11 iOS 16.0 and on iPhone 13 iOS 16.2). In fact, it is as if it didn't load the videos, the space remains empty and obviously the GSAP scrollTrigger animation doesn't start. Did I miss something?
-
Hello good People! I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js. Here is the current dev site: https://legopd22.iwanwilaga.com/ Please check the robot animation on scroll (with orange background) especially on iOS / apple devices. So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked. Do you have hints please why this happens? I applied these css but didn't fix it. transform-origin:center!important; transform-box:fill-box!important; Using TweenMax(). and nested timelines function SVG_Vernie_Robot_Anim(){ let ctrl = new ScrollMagic.Controller(); var timeline_robot_inner_elements = new TimelineLite(); var timeline_robot_slide = new TimelineLite(); var timeline_master = new TimelineLite(); var robot = document.querySelector("svg#robot-vernie"); var robot_head = document.querySelector("g#Head_Vernie"); var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left"); var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right"); timeline_robot_slide .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0)) .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0)) ; timeline_robot_inner_elements .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1)) .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1)) ; timeline_master .add(timeline_robot_slide,0) .add(timeline_robot_inner_elements,2) ; new ScrollMagic.Scene({ triggerElement: ".wp-block-getwid-section.szekcio-terkep", duration: 200, //px }) .setTween(timeline_master) .addTo(ctrl); } SVG_Vernie_Robot_Anim(); To me seems the problem is with rotation. Other `translate` properties work ok. Can you reproduce the same issue? Thank you so much! Best, Wiktor
-
Hi! We are developing a long onepager with scrolltrigger. Many sections are pinned this way: ScrollTrigger.create({ trigger: ".panel_riddle", start: "top top", pin: true, end: "+=100%" }); This page is currently 20000px long on the iPhone. Everything works fine on desktop, but when scrolling fast on ios (safari and chrome) there is a problem. When scrolling fast down and up one after the other, the website jumps to another y-position when the scrolling ends. I already tested the GSAP helper functions "stop overscroll" and "stop resizing window", but the problem remains. Strange thing is that the yScroll value of the page stays the same before and after the wrong jump. So for example fast scrolling to yValue 17500, then the page jumps a bit further or back and the yValue is still 17500 from above. Does anyone know if this is a general IOS bug in interaction with scrolltrigger, or in which direction we have to think. Thanx a lot. Attached a video from this behavior at the page bottom. In the upper left corner you can see the page yScrolling value. FullSizeRender_1.mp4
-
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
- 12 replies
-
- 11
-
-
hi, I have a problem on ios devices with scrollTrigger, when I scroll, scroll suddenly skips or jumps, I have no idea why this happens because the code I wrote is only this. There's a video at the bottom that you can see what I mean. Thank you for your attention:) gsap.timeline({ scrollTrigger:{ trigger:'#s0', scrub:true, start:'top top', end: 'bottom -220%', pin: '#s0', } }) // .to('#photo1',{maskImage: 'linear-gradient(rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 50%)'}) .to('#photo1', { opacity: 0 }); idk.mov
-
Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: https://codepen.io/team/pixelart/pen/mdVbobo In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein
-
Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple) -
Hello. thank you for your work. I'm using GSAP with React and ScrollMagic and having troubles with IOS scroll animations. other platforms have great productivity of animations. What am I doing wrong?
-
I'm loading an SVG I created in Inkscape and using it as a control in an Ionic hybrid app with help from GSAP. When a user clicks on the L/R it spins about and disappears to reveal other options. Using it in the browser and on Android works great. On iOS however it's occasionally spotty. This mostly occurs after a reboot. Subsequent interactions are at the desired speed. This might be difficult to reproduce as it's possibly specific to the device I'm using. Having said that, I'm open to completely redesigning how the thing disappears. I just need it to hide and show itself in some aesthetically pleasing manner. Incidentally, I tried using autoAlpha: 0 and it didn't change the opacity or hide the elements. I've isolated the control in an otherwise blank project to better illustrate the issue (github). The video attached shows the control running on an iPhone SE, iOS 11.4, 64-bit A9 SoC processor (two 1.8GHz cores), 2GB RAM, PowerVR GT7600 (six-core graphics). addEventHandlers () { const yingyang: any = document.getElementById("select-side"); yingyang.addEventListener("load", function() { const content = yingyang.contentDocument; const ying = content.getElementById("ying"); ying.addEventListener('click', function() { TweenMax.to(ying, 0.4, { scale: 2, x: "+100%", y: "-50%", transformOrigin:"100% 0%", opacity: 0, force3D:false, autoRound: false }); this.animateSelectSide(yingyang); }.bind(this)); }.bind(this)); }; animateSelectSide(yingyang: HTMLElement) { TweenMax.to(yingyang, 0.7, { rotation: -270, opacity: 0, force3D:false, autoRound: false, onComplete: function() { yingyang.style.left = '-500px'; } }); }; speedkills.MP4 yingyang.svg
-
Hey guys, This is not strictly related to the greensock, but also could be I created a banner which has video inside and the video is muted. Whenever my banner is showed, no matter if inside app or inside browser, on IOS, any other sound in background (such as music player) will stop. I know this is default behavior of the IOS (and android as well), but I also saw that some company managed to build banner with video which doesn`t stop background music, but I`m still not sure how. So my questions is - is it possible to workaround somehow this issue inside banner itself via javascript or something ? Maybe something like playing video through the canvas (already tried that didn`t worked), or separating video and audio, dunno. Is there hack or a way to play video that will not affect background music on IOS ? ! Thanks
-
Note that I am working on other's implementation, I am not familiar with GSAP yet. In this animation, when the safe opens... red boxes are coming out of it. There is a performance issue with these flying boxes. They don't "fly" smoothly only on ios devices (all of them). This is happening at line 168 in logosDistances.forEach loop. For the debugging, to ensure that there is no other animation in progress at the same time... I wrapped this tween in a timeout of 3sec. There is TinyURL for this animation, the: https://tinyurl.com/redredbox Thank you in advance
-
Hi all, I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS. On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it. On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls. In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the draggable height. How can I get the same behavior on the platforms? Thanks in advance! (It's better to test the pen in full page mode: https://codepen.io/massic80/full/qYbpOL)
-
Hi, I'm having real issues with a draggable map I've created, specifically on devices using iOS. My animations all run nicely, however when I press and try to drag the map around, there's a good 4-5 seconds before the page responds, and then the move happens instantly, rather than smoothly. If necessary I can provide you with a link to view the development site if that helps, however, I'll need to send it privately if possible? There are a number of layers creating the map, all stacked on top of each other - might this have something to do with it? Any help you're able to give me would be greatly appreciated. Kind regards
-
TLDR: In iOS 11, if using scrollTo plugin for the window while an input is focused, it thinks the bottom of the mobile keyboard is the bottom of the viewport rather than the top of the keyboard, thus hiding any inputs located at the very bottom of a page. Any Greensock fixes? I discovered this error due to iOS's 3rd-party keyboards not accounting for the input selector bar on top of the mobile keyboard when determining the bottom of the viewport while an input is focused located at the bottom of the window, thus blocking the view of the input. What seems to be happening is if the window element is moved using scrollTo while an input is focused at the very bottom of the window, the correct positioning is not scrolled to. This is the case mainly for values that exceed the height of the window, and subsequently effects using the scrollTo Plugin when using scrollTo:"max" I know you all can't fix the iOS issue, but since its affecting the plugin, is there any workaround to account for when an input is selected such as a chat entry box at the bottom of the screen, and have the plugin scroll to the bottom of the screen properly? I've included a codepen, but only works in debug mode since there was already an issue you all found with scrolling in iOS in iframes. Thanks! https://s.codepen.io/tallwhitey/debug/gozWWQ/VGrWNnabZVaM
-
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! -
Hello I am new to both adobe animate cc (2017) and GSAP and would appreciate a dumb down answer to this question. So I've followed the tutorial of opening an action, opening a url of the zip file that you download from Greensock. It works when working in html5 canvas for adobe animate cc. However when working in IOS air canvas, I can't find how to upload the zip file. Does anyone know if GSAP works with IOS air and how?
-
Hi guys! I'm having a bit of trouble here with Draggable util. I am trying to make a tabbed interface on mobile, made of a horizontal container which can be scrolled in the X axis with sections, and sections which can have any number of posts, and can scroll in the Y axis. With draggable, this works great in desktop when using a mouse, but when on mobile (Android, iOS, or Chrome Inspector as mobile), the X axis won't budge. You can watch it in action in the codepen. Any insight on it would be greatly appreciated
-
I've got an very simple animation where an element is positioned relatively @ top:820px; with a style sheet (so not inline). I use a Tween.from() to tween the element from 1080px; This animation works fine on Web and in Electron but when I execute it on an iPad in safari, the element ends up at position 418px. I'm a bit at a loss of what could be wrong so any advice would be appreciated. I've added a codepen example. The top of the grey box should animate up to match the black line but on iOS it actually will animate to a different position.
-
Please Remove the Topic. Issue relays on latest TimeLineLite (1.19.1). Issue is not reproducable on version 1.17 or older. So we are back to version 1.17 Thank you, ThemePunch
-
I forked this off of codepen. http://codepen.io/magalhaespaulo/pen/OyQeQv But mine does not render correctly on iOS. The road and clouds rotate correctly, but the city is way off on iOS. I am trying to get it to work so I can use it on a banner ad.
-
Hope someone can help me out here. I am doing a very simple y-axis rotation animation that works fine on desktop and Android, but does not rotate on iOS (Safari OR Chrome). Any ideas what I'm doing wrong? Thanks so much!
-
Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise
-
Hello, I trying to create a top navigation bar draggable on desktop and mobile but have some issue with the following case : Basically I need to have a container (bounds) smaller than the navigation bar (element) that I need to drag inside. You can have a look at the following jsfiddle. https://jsfiddle.net/biquetto/4th0sfp2/28/ Regards
-
Hello guys, I'm with a doubt in building an application. I have a home screen where there are multiple animations. The animations are made in SVG images. But the problem is that they are getting too slow and when they stop using scroll animate (in IOS) and are slower (on Android). Could someone tell me if there is any limit animations for a mobile application? or if it really works? Thank you very much in advance
-
Hi, I am using a combination of ScrollMagic and GSAP to achieve a scroll-based (100% height/duration) animation at the top of my page. Everything works great in Safari/Chrome/Firefox, but when I test on mobile (iOS) the animation is all screwy. Seems to be an issue with overflow and/or viewport height, but I cannot seems to find a fix. Apologies in advance if this is an issue related to ScrollMagic (not GSAP), as I am still getting acquainted with both. Live site can be found here: http://aigasd.github.io
