Search the Community
Showing results for tags 'ionic'.
Found 7 results
-
I've been trying to implement Gsap with ionic & angular and it seems like just don't work https://lampdigitalcol.web.app/666 https://stackblitz.com/edit/gsap-scroll-trigger?file=src/app/app.component.html Does anyone have any idea of why is this happening?
-
Hi! I have this new project with Ionic and some custom animations. Does GSAP plays nice with Ionic/Angular.js? And is there any chat/clack channel for GSAP? Would be nice to have one, especially slack which is getting really popular at the moment. cheers, Nico
-
how can i get access to the coords when dragging a div in angular using gsap draggable ?
-
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
-
So I have been having tons of fun with GSAP for the last month doing animations for an Mobile App Idea I've had for some time. I've used TweenMax and TimelineMax to create some really cool animations with SVGs in a hybrid mobile app using the ionic platform. I've searched the internet and have found lots of help getting started (especially in these forums) but I am not finding anything on battery performance. I ported a minimal version of my app over to my Iphone 6s Plus and was testing it. Everything was working great but then I realized that my battery life was draining fast. I mean 5% in 1 minute. I looked at the diagnostics in Xcode and it was because of the heavy GPU usage. I am going to try using TweenLite and TimelineLite for all those animations that I can but will that decrease battery usage? What have you guys done in your apps to decrease battery usage with GSAP? Or am I using the wrong technologies for what I want to accomplish? Thanks ahead of time!
-
Hello. Recently I bought a package which contains DrawSVGPlugin. I want to implement this plugin in Ionic3 . As I know a npm package doesn't have plugins from club, nor @types/gsap. I added DrawSVGPlugin.js into node_modules/gsap and later recreated an android platform. In .ts file as import I tried: import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; and as calling plugin: TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut}); my html source of svg: <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none"> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/> </svg> Can anyone tell me what I am doing wrong? Or is there different way of doing it?
-
Hi guys! I'm developing a mobile app with computer network animations, using GSAP. My intent is to show multiple messages to user using tl.call() function of TimelineMax, with $ionicPopup, before the animation starts. See the code: function($scope, $stateParams, $ionicPopup) { TweenLite.defaultEase = Power1.easeInOut; var tl = new TimelineMax(); tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //"dummy" here tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //more code } The problem occurs when I call tl.call() like that, one just after other, the second does not work! If I insert a kind of "dummy" statement between the two "calls", like "tl.to('.animationFrame', 0.5, {x: 0});", it works fine. Can you say what is wrong in my code, or if it is a bug in GSAP? Thanks.
