Search the Community
Showing results for tags 'ipad'.
-
Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!
-
Hi! Not sure if this is the best place to ask help regarding this, but this forum was very helpful to get me started with gsap and scrollmagic. I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. I've stumbled upon several examples and it's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not applicable, the anchor navigations don't work and the results when using Chrome and Safari varies (anchor links not working on ipad chrome but works well on ipad safari). I added a drag function which is helpful for tablets, but it staggers and the animation is not very smooth. Below is the mousewheel function I used: document.addEventListener('wheel', function(e){ if(e.type != 'wheel'){ return; } let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1; document.documentElement.scrollLeft += delta; document.body.scrollLeft += delta; }); And here is the drag function where I based from https://codepen.io/thenutz/pen/VwYeYEE const slider = document.querySelector('html'); let isDown = false; let startX; let scrollLeft; slider.addEventListener('mousedown', (e) => { isDown = true; slider.classList.add('active'); startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); slider.addEventListener('mouseleave', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mouseup', () => { isDown = false; slider.classList.remove('active'); }); slider.addEventListener('mousemove', (e) => { if(!isDown) return; e.preventDefault(); const x = e.pageX - slider.offsetLeft; const walk = (x - startX) * 3; slider.scrollLeft = scrollLeft - walk; //console.log(walk); }); Unfortunately, with recent ipad update, it seems not possible to detect if the user is using an ipad or ipad pro. Is there something wrong with the code or possibly css that can fix this? Appreciate any help!
- 1 reply
-
- ipad
- horizontal scroll
-
(and 1 more)
Tagged with:
-
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
-
Maybe someone can help me out. I have performance problems loading an GSAP animation. The animation is this: Add SVG to div, and the SVG will follow a data path in SVG d: coordinates. It works fine on desktop, and only sometimes on Ipad / Iphone. The problem is that the SVG is moving very slowly, like the data path is still being loaded. I tracked the fps, which topped around 100 for Ipad. How to experience the problem: Click on the down arrow to go below water surface. Then click on the whale icon. The whale SVG should appear from left to right, and follow a data path for 20 seconds. If the whale moves smoothly, then all is good. But if the whale is moving very slowly, and in staggering movements, then the error must be performance problems ?
- 1 reply
-
- pathdatatobezier
- ipad
-
(and 1 more)
Tagged with:
-
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
-
I wrote some online chemistry games a couple years ago using GSAP for my animations. When I first wrote it, I was able to run it on a computer (most browsers), an iPad, or an iPhone. Now, it no longer works on my iPad, although it will work on a computer Safari. I wonder if anyone knows of a quick fix or common problems for tablets or other mobile devices. Problem: I have cards that flip, and the wrong side of the card is shown and/or the words are backwards. See: http://ketzbook.com/chem/elementsymbols/elementsymbolmatch.html
- 5 replies
-
- ipad
- flip animation
-
(and 1 more)
Tagged with:
-
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.
-
I made an interactive learning site that relies entirely on GSAP (HTML 5) for its animations. Generally, all the animations are quite smooth on Chrome or Firefox, but when I try it on my iPad, they skip sometimes. It doesn't look bad on the iPad, but it skips and misses parts of some animations. I know this is a more general question, but is this poorer performance on the iPad normal, or is there anything I can do? (FYI, I am a science teacher. I am band new to coding. I just recently taught myself JS and CSS.) Thanks! BTW, the site is temporarily at: http://ketzbook.com/chem/elementsymbols/elementsymbolmatch.html
-
Hi! (nice new site btw) I've got a nice quick animation, that works well on desktop (and on my phone), but on an ipad2 it's too quick. Ie it happens before the ipad has chance to render the frames. It's kind of a gratuitous animation, so it'd be nice (but not essential) if it could be seen. So odd request maybe, but is there a way to make a tween slow down for a slower processor? Thanks, Andy
-
Hi, I am building a page that builds multiple 'scenes' horizontally in the content area. Only one scene is visible in the area at a time. Users can drag the scene container to get to other scenes. I've done this using Draggable. For the most part, it has worked great. However, some scenes have a large video in them. When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag. I've tried adding data-clickable="false" to the video tag but it still doesn't work. This all works on the desktop as far as I've tested it. Here is a code pen sample of what I'm talking about. You can drag the grey container box, but if you try to drag over the video, the container won't move. http://codepen.io/anon/pen/yohqG I'm using iOS 7.1, but the same thing happens in an older version as well.
-
Hi, im trying to make an ipad app and im trying to use the "transformAroundPoint" plugin of yours so that i can make a movieclip rescale from a point decided by the zoom gesture. Up to now, all i've managed to do is taht it rescales a bit, from the center point of the image and then it goes back to the size and position it had before the zoom touch. can someone help me? thanks for your time this is the line of code i have used: img3.addEventListener(TransformGestureEvent.GESTURE_ZOOM,onGesturePinch); img3.addEventListener(TouchEvent.TOUCH_BEGIN, taphandler); function taphandler(evt:TouchEvent):void { puntito = new Point(mouseX,mouseY); trace(puntito); } function onGesturePinch(event:TransformGestureEvent) { TweenLite.to(img3, 1, {transformAroundPoint:{point:puntito, pointIsLocal:true, scaleX:event.scaleX, scaleY:event.scaleY}}); } HelpGreenSock.zip
-
I am using TweenMax to fade some interface arrows on an AIR / iOS project, using the following (slightly simplified) code: TweenMax.to( overlay.arrowE, 0, { alpha:overlayFactorX + minOverlayAlpha, colorMatrixFilter: { saturation:overlayFactorX }} ); The tween essentially responds to a user drag action, and highlights one arrow graphic (colour and alpha up) to show the direction of travel, whilst other arrows recede (colour desaturates to greyscale, and alpha decreases). A bigger drag creates a stronger highlight. Everything works fine when viewed in preview on PC, and the code does runs when compiled and running on an iPad, BUT the saturation doesn't appear to work. The arrows (there are four) change alpha, but their colour saturation remains unchanged. Any ideas why this might be the case? Thanks! TweenTest.zip
- 6 replies
-
- colorMatrixFilter
- iPad
-
(and 1 more)
Tagged with: