Jump to content
Search Community

Search the Community

Showing results for tags 'android'.

  • 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. Dear Support, We are developing a website that has Scroll Smoother applied on the whole page with multiple scrolltriggers applied. We use normalizescroll(true) globally on all pages so that it follows scroll correctly (Android and IOS). But this options breaks the <a href> elements on touch hold event. Specifically on mobile devices when you hold a <a> element it fires the click event. When we disable normalizescroll it doesnt fire the click event when you hold a <a> element. We created a small codepen to recreate the issue. Please visit it from mobile devide(preferably Android with Chrome). We have fully updated softwares.
  2. Hello there! I'm using the latest GSAP and ScrollTrigger libraries and am getting jumpy animations on mobile. Both on Android 10 - the latest Chrome and Mozilla, and iOS 17.2 - latest Chrome, Safari, Mozilla and Brave. This happens when I try to implement a parallax effect. The problem occurs on your parallax demo too. When I enable normalizeScroll the problem disappears from both iOS and Android but it introduces a new problem on iOS. On iOS the scroll starts lagging a lot when my finger is on the screen. When my finger leaves the screen everything continues smoothly.
  3. I tried to place my page using Draggable.js on an Android WebView but it seems like it's not working after I dragged something. It works on the Chrome app though. This is my WebSettings for the WebView. String UA = "Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19" + " (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19"; WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(false); settings.setBuiltInZoomControls(false); settings.setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND); settings.setDatabaseEnabled(true); settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); settings.setRenderPriority(WebSettings.RenderPriority.HIGH); settings.setCacheMode(WebSettings.LOAD_DEFAULT); settings.setDomStorageEnabled(false); settings.setUseWideViewPort(true); settings.setAllowFileAccess(true); settings.setAppCacheEnabled(true); settings.setUserAgentString(UA); This is my whole code. import android.content.Context; import android.content.DialogInterface; import android.net.http.SslError; import android.os.Build; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.DragEvent; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.webkit.ConsoleMessage; import android.webkit.CookieManager; import android.webkit.SslErrorHandler; import android.webkit.WebChromeClient; import android.webkit.WebResourceError; import android.webkit.WebResourceRequest; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.EditText; import android.widget.RelativeLayout; import android.widget.TextView; public class MainActivity extends AppCompatActivity { WebView webView; SwipeRefreshLayout swiLyt; String url = ""; Context ctx = this; String TAG = "simpler"; String httpReq = ""; TextView lbl; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.webview); swiLyt = findViewById(R.id.swiLyt); lbl = findViewById(R.id.lbl); httpReq = "http://"; swiLyt.setEnabled(false); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { webView.setWebContentsDebuggingEnabled(true); } final WebViewClient webClient = new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { swiLyt.setRefreshing(false); lbl.setText(url); fullScreen(); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Error"); dlgBuild.setMessage("Err: "+errorCode+" desc: "+description); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedError(view, errorCode, description, failingUrl); } @Override public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Error"); dlgBuild.setMessage("Err: "+error.toString()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedError(view, request, error); } @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("SSL Error"); dlgBuild.setMessage("Err: "+error.toString()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); super.onReceivedSslError(view, handler, error); } }; WebChromeClient webChromeClient = new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage consoleMessage) { AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Console"); dlgBuild.setMessage(consoleMessage.message()); dlgBuild.setCancelable(false); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); return super.onConsoleMessage(consoleMessage); } }; String UA2 = "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36" + " (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36"; WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setLoadWithOverviewMode(true); settings.setSupportZoom(false); settings.setBuiltInZoomControls(false); settings.setPluginState(android.webkit.WebSettings.PluginState.ON_DEMAND); settings.setDatabaseEnabled(true); settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL); settings.setRenderPriority(WebSettings.RenderPriority.HIGH); settings.setCacheMode(WebSettings.LOAD_DEFAULT); settings.setDomStorageEnabled(false); settings.setUseWideViewPort(true); settings.setAllowFileAccess(true); settings.setAppCacheEnabled(true); settings.setUserAgentString(UA2); webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); webView.setWebViewClient(webClient); webView.setWebChromeClient(webChromeClient); webView.setVerticalScrollBarEnabled(false); webView.setHorizontalScrollBarEnabled(false); webView.setLongClickable(true); webView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View view) { Log.d(TAG, "long click"); return false; } }); webView.setOnDragListener(new View.OnDragListener() { @Override public boolean onDrag(View v, DragEvent event) { return false; } }); showDlg(); } public void showDlg(){ RelativeLayout lyt = new RelativeLayout(ctx); final EditText txt = new EditText(ctx); RelativeLayout.LayoutParams lytParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); txt.setHint("ip:port"); txt.setLayoutParams(lytParams); lyt.addView(txt); txt.setText("192.168.149.59/pos_mock_up"); AlertDialog.Builder dlgBuild = new AlertDialog.Builder(ctx); dlgBuild.setTitle("Enter ip:port"); dlgBuild.setCancelable(false); dlgBuild.setView(lyt); dlgBuild.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { String ipPort = txt.getText().toString(); if(!ipPort.contains(httpReq)){ url = httpReq+ipPort; } Log.d(TAG, "url: "+url); swiLyt.setRefreshing(true); webView.loadUrl(url); } }); dlgBuild.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialogInterface, int i) { dialogInterface.dismiss(); } }); AlertDialog dlg = dlgBuild.create(); dlg.show(); } @Override public void onBackPressed() { webView.loadUrl("javascript:OnBackPressed()"); } private void fullScreen(){ final View decorView = getWindow().getDecorView(); decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); decorView.setOnSystemUiVisibilityChangeListener (new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { // Note that system bars will only be "visible" if none of the // LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set. if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) { // The system bars are visible. Make any desired // adjustments to your UI, such as showing the action bar or // other navigational controls. decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } else { // The system bars are NOT visible. Make any desired // adjustments to your UI, such as hiding the action bar or // other navigational controls. decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } } }); } } Sorry, I don't really know how to create a test but that code above is everything I only used for the project I'm working. This is my layout file if you need it. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swiLyt" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> a<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" > </WebView> </android.support.v4.widget.SwipeRefreshLayout> <TextView android:id="@+id/lbl" android:layout_width="0dp" android:layout_height="wrap_content" android:textColor="#0000ff" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> </android.support.constraint.ConstraintLayout>
  4. HI everyone! I am being active here! I made a simple game using GSAP I know it is possible but it is really hard to code a game using GSAP alone.. can you guys which part of gsap I am going to use if I want to make an awesome game using GSAP! Pen Link: http://codepen.io/Waren_Gonzaga/pen/dMpjMy Thanks heroes!
  5. Hi, I'm running into a problem where the event data is not passed into the parameter of the draggables onClick. In iOS I'm at least getting pageX as expected, but on Android stock browser (called com.android.browser (37.0.0.0)), the behaviour is weird. Sometimes both values are 0 and screenX, screenY are undefined, sometimes the event is fired twice and the second time all values are correct. If you add if (e.pageX === 0 && e.pageY === 0) return; to the beginning of the onClick handler, you will see that once every couple taps, the alert will come up and the values will be there. Thanks
  6. 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
  7. Hi All, I am writing this thread because I want to show my appreciation to folks in this forum, they helped to resolve my problem in a very short time. Few days ago I jumped into a thread, I didn't read the rules, my bad. The original thread I jumped into: Then @Dipscom and @GreenSock (Sorry I don't know why I couldn't mention you here) helped quickly. My problem was resolved by @Greensock helped to update the beta version of Draggable. Now my elements can be dragged in Chrome of Android devices. Thank you very much both of you. I wish you have Good Health and Good Luck. Cheers, Alex
  8. Hello, my animation on iphone is so blur. I use svg on all elements, so there is no way blur. When I animate svg inside a div, it looks blur. When the GSAP timeline ends, everything looks fine. So it is blur during animation. I test on iphone safari and chrome, it is blur. But android looks fine! Here is my source code, if you open it with mobile, it will load mobile code, otherwise it will load desktop code. So there is two version https://github.com/rockmandash/InteractiveInfographic2 Here is the website: https://rockmandash.github.io/InteractiveInfographic2/ I tried these code, but not helping. body { filter: none !important; -webkit-filter: blur(0px) !important; -moz-filter: blur(0px) !important; -ms-filter: blur(0px) !important; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0') !important; } Here is the testing video!! Please take a look what happened. https://youtu.be/_8GOauh1Ko0 Many many thanks on this awesome community!!!!
  9. I'm having an issue with the draggable plugin on our new website. It was working before and I can't seem to work out what has changed. I found a few topics but the resolutions didn't appear to be relevant to my situation. The website is https://www.britishwebsites.co.uk - A user can drag the map around and I'd like for the entire map to be draggable (including the landmarks/links). I've also got a click event on the links (added using jQuery) to override standard functionality using event.preventDefault(); On desktops and iOS devices the behaviour is as expected, however on Android you have to long tap or tap lots of times in quick succession to trigger the click event and show a category. I'd prefer not to rework the functions to work with the touchstart/mousedown and touchend/mouseup events while manually detecting the amount the map has moved, but wondered if this is the only solution? I cannot seem to isolate another issue and there are no touch events with preventDefault or stopPropagation applied. This is my config for initialising draggable: var draggableConfig = { type:"x,y", edgeResistance:0.75, bounds:map.elems.$mapBar[0], //trigger:map.elems.$mapCanvas[0], throwProps:true, zIndexBoost:false, dragClickables:true, onThrowUpdate:map.update, onDrag:map.update, onDragStart:function(){ map.updateMessageSequence(true); if(map.lastDragTime === false){ map.dragStartTime = new Date().getTime(); } }, cursor:map.customCursor ? "none" : "move", force3D:true, overshootTolerance:0.2 }; this.draggableInstance = Draggable.create(map.elems.$mapCanvas[0], draggableConfig); this.update.call(this.draggableInstance[0]); The click event for the links which I've tried applying both before and after initialising Draggable: map.elems.$clickable.on("click",function(e){ e.preventDefault(); var category = $(this).attr("href"); woopra.track("mapClick", {category:category}); ga('send', 'event', 'Map', 'Click', category); mapCats.changeCatState(category); }); The only other code I believe may be relevant is the touch events on the SVG shapes overlaying the map: svgMouseEvent:function(e){ e.preventDefault(); var $area = $(this); switch(e.type){ case "mouseover": case "touchstart": if(map.customCursor){ map.elems.$cursor.addClass("finger"); } $area.data("$matchingLandmark").data("mouseover",true); new TweenLite.to($area.data("$matchingLandmark")[0],0.5,{autoAlpha:1}); new TweenLite.to($area.data("$matchingLandmark").data("$labelEl")[0],0.5,{autoAlpha:1}); break; case "mouseout": case "touchend": if(map.customCursor){ map.elems.$cursor.removeClass("finger"); } $area.data("$matchingLandmark").data("mouseover","tween"); map.update.call(map.draggableInstance[0]); break; } } Thank you in advance if any help can be offered.
  10. Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
  11. Hey guys, I'm building some test shapes in 3d, and they're working great so far. I can add, insert new planes , keep them as svg and it's going great... BUT the ads we make here go into a tablet in a WebKit/Webview enviroment. When they do on IOS it looks perfect On Android No matter the size the planes shift Android 1 Android 2 Both different models, and massive screen size differences I tried to figure out how to prevent this from happening, all my values are based off start values which are x y z values so i'm not using hard numbers i dont think... I tried to debug it as best i could and android just doesn't play ball. It wont return offsetWidth, device width returns random numbers which aren't realistic to the stage, device width returns 0, viewport width returns 0... But i dont know if any of them are the reason why this is happening. From what I see the top and bottom planes are perfect, but the side planes are all shifting.. Do you have any idea why? Also off topic but again the codepen made my box different and skewed it.. looks skewed. When it looks like what the above ios screenshot looked like on my desktop(and thats the way it should). But yeah I'm mainly really concerned about those gaps. Any tips? Thanks!
  12. 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
  13. I'm working on a digital signage system's content editor interface, which produces HTML5 pages. I've recently replaced the animation engine of these generated pages from pure CSS3 to GSAP and I'm experiencing some cases when the content animation has strong lag and freezes on our android devices, while on Windows/latest Chrome it runs well. I also tested some GSAP codepen demos on the android devices, and those run well, so I think I'm doing something wrong here, and would like to get some help. One of the devices I tested on (possibly the strongest hardware): http://www.gearbest.com/tv-box-mini-pc/pp_282317.html The example page: https://storage.googleapis.com/content.myshopdisplay.com/193/1377/8401/index.html About the code in the page: The page has a transform scale applied to stretch the content to full screen (this is not animated). The page first moves in letters one-by-one by animating the top and left properties, to make the word EURONICS. This runs laggy but still ok on android. After that a big background picture fades in by opacity animation, then 4 stars also appear on the right side by opacity animatin in a delayed sequence. The strongest lag happen when the big background picture fades in. It takes about 1 second on PC to animate that, and on android it takes about 30-60 seconds. Each page element has their custom CSS values in the inline style attribute. The animatin timelines are generated at the start of the page: I create a timeline for each element new TimelineMax({repeat: repeatAnimation, repeatDelay: 0, paused: true, smoothChildTiming: true}); Then I iterate over the style properties that should be animated (not all on an element's style attribute, I store the animated properties in a separate container), I create a timeline for each of these, this constructor function gets no arguments. After that I iterate over the time positions I stored. If this is the first value at position 0, I use the set() function: propertyTimeline.set(targetElement, valueObject, 0); If it's not the 0 position I calculate the exact duration of the tween and add it to the timeline with the to() function: propertyTimeline.to(targetElement, duration, valueObject); When all values processed for a property I add the property timeline to the element's timeline at position 0. The element's timeline contains only these property timelines. When this is done to all elements I iterate over all of the element timelines and call play(0) on them. I do not add the element timelines to a main timeline because they can have different length, and they can repeat, and they need the ability to restart at different times. It's understandable that too many effects can cause lag, but this page is not too effect-heavy in my opinion, so I'm clueless why is it so laggy. It is also very inconvenient that this lag actually extends the full duration of the animation, while with CSS iirc it only skipped frames when it was too laggy, but It finished the animation at the desired time (this is important for our system because these pages are being played one after one, and the pages change at a fixed time) What could be wrong here? Thanks in advance for your help! Roland
  14. Hello, We have been using the Greensock library in an Adobe AIR application for a while now with really no problems. We decided to try our Windows based application on an Android device and found that most things work quite well. The only problem we are seeing with the Greensock library turns up when we use scale effects. By this, I mean any time I attempt to scale a SplitTextField from say 4 to 1, the system lags. If I scale multiple SplitTextFields at once and by letter, then system can almost crash. The board we are using is running one of the latest version of Android and is capable of outputting HD content. Below is the code for one of the animations being affected. Each letter should scale down and rotate in, staggered. // target is the object we are going to animate // time is the total amount of time for the animation public static function MyEffect(target:SplitTextField, time:Number):TimelineMax{ // Activate plugins TweenPlugin.activate([TransformAroundCenterPlugin, AutoAlphaPlugin]); // Create new TimelineMax Object var t:TimelineMax = new TimelineMax(); // Determine how long each letter should animate var timePerHold:Number = time / target.textFields.length; // Go through each textField in the SplitTextField and complete the following animation for(var x:int = 0; x < target.textFields.length; x++){ // Use 20% of the time to rotate the text and scale the text half way t.fromTo(target.textFields[x], timePerHold * .2, {transformAroundCenter:{scale:4, rotation:-180}, alpha:0}, {transformAroundCenter:{scale:2, rotation:0}, alpha:1}); // Use 80% of the time to finish scaling the text t.to(target.textFields[x],timePerHold * .8, {transformAroundCenter:{scale:1}, ease:Elastic.easeOut}); } return t; } I was going to do my best to optimize the system but I wanted to go about it the right way and not just start guessing how to fix this. Any thoughts or direction would be greatly appreciated. Thank you!
  15. Hi, I have this bug that I want to ask about. I am using swfloader to load up swf movie and as it loads, I play it after is hit certain percentage loaded. The thing is, the first time I load up the swfloader, the screen blink. It only occur to the first swf loading upon launching the app, and it only happen in android, not IOS. After the first swf loading, other swf file load without a blink perfectly. Can anyone advise me on the possible reasons that cause this blink? I would like to get rid of it.
  16. Hi Folks, I am not sure this is a GSAP issue, but it is only happening to draggable elements in my project. I apologize if I missed something obvious, but I've hit a dead-end. My project uses draggable buttons of various sizes in a graphical test environment. This project has been running fine for a year but now it is giving me trouble only on my Android Nexus 7 test tablet. Everything works great on iPad and all modern desktop browsers in Mac & Windows. Take a look at the two images I have attached. The "draggable_sample_correct.jpg" image shows what the 3 draggable buttons should look like. The "draggable_sample_Android-bogus.jpg" image shows what it looks like on my Android device. I noticed that the transform: translate3d style is altered. I can't figure out where this transform is coming from in the first place, and why it's different on Android in the second place! The dragging behavior is inconsistent as well. On Android, when I drag one of the buttons onto a target and let go, it sometimes goes to its correct home position... at other times, it goes to a new incorrect position. Here is my setup and onDrop functions, which have not been touched for a year. This used to work on this same test tablet, but now I'm wondering if some update to Android has caused the problem? var setupDroppables = function(theDropClass) { // DRAG N DROP var droppables = $(theDropClass); var overlapThreshold = "50%"; var targetContainerDiv = "#singleVtarget"; switch (theDropClass) { // There are several styles of drag & drop question layouts. case ".threexDnDsideBySide": targetContainerDiv = "#threeUpVtargets"; break; case ".twoxDnDsideBySide": targetContainerDiv = "#twoUpVtargets"; break; case ".blueDnD": targetContainerDiv = "#singleVtarget"; break; case ".twoxDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".threexDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".scenarioSel": targetContainerDiv = "#singleVtarget"; break; } Draggable.create(droppables, { bounds:window, onPress:function() { TweenLite.set(targetContainerDiv, {autoAlpha: 1, display: "block"}); }, onDrag: function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest($(targetArray[i]), overlapThreshold)) { console.log("we're on it!"); $(targetArray[i]).addClass("highlight"); } else { $(targetArray[i]).removeClass("highlight"); } } }, onRelease:function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest(targetArray[i], overlapThreshold)) { onDrop(this.target.id, targetArray[i]); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); $EV_SoundManager.playSFX("throb018"); return; } } $EV_SoundManager.playSFX("throb018"); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); } }); }; // FLASH THE BORDER IF THE CORRECT DROP var onDrop = function (dragged, dropped) { var thisSelection = dragged; var thisPos = targetArray.indexOf(dropped); var correctChoice = correctChoices[thisPos]; var thisIndex = buttonArray.indexOf("#" + thisSelection); if (thisSelection == correctChoice) { isCorrect = true; if (jQuery.inArray( thisSelection, correctQuestions ) == -1 ) { correctQuestions.push(thisSelection); } animateMsg(questionArrayRandom[currentQuestionIndex], correctStatements[thisIndex]); TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true}); } else { isCorrect = false; incrementAttempts(); animateMsg(questionArrayRandom[currentQuestionIndex], incorrectStatements[thisIndex]); hideTargetVContainerDivs(); $(dropped).removeClass("highlight"); } }; Any insight or leads for solving this are greatly appreciated. Thanks! --Kevin
  17. Hi, recently in one of my projects I noticed a bug when creating a full-page draggable element with a form input field. On Android (HTC ONE X, Nexus 5 tested) default browser behaviour is to focus on the form field, when your whole page is a draggable container it fails to do so and causes strange behaviour. I tried recreating this in my Codepen. Steps to follow: - Scroll down - Click the input field Expected bug behaviour: - Focus is not on form field Devices tested: - HTC ONE X - Nexus 5 Since codepen zooms in, you can zoom out by pinching on the footer (You will see that the focus is not on the field) Greetings, Martijn EDIT: Accidentally overwrote the codepen, here's the original one http://codepen.io/MartijnWelker/pen/YXWJQg
  18. Hi! I'm just starting with the JavaScript Version GSAP - awesome! My question/problem: Animation doesn't start in IE11 and Android <=4.3 SVG is embedded as object <object id="obj" type="image/svg+xml" height="20%" width="20%" data="img/status2.svg"></object> A rectangle in the svg is selected and animated: var element = document.getElementById("obj").contentDocument.getElementById('rectangle'); TweenMax.to(element, 1, { rotation:30, transformOrigin:'50% 50%' }); No problem in Chrome and FF, but in IE11 and Android <4.4 I can't provide a codepen demo because of cross domain restrictions (embedded object) but here is a link: http://www.e-challenge.de/greensock/animation.html Thanks for help! Tom
  19. Is there a way to test the android OS + Device type without having an android device? An emulator that is more than just setting viewport sizes? I have some interactions that work buttery smooth on IOS and work very badly in Android. I could post a URL, but I'm more interested in seeing if I can do this on my own without the device. In the meantime I am going to attempt to follow the tips in this post, but the only way for me to know if my results were fruitful is to ask my colleague tomorrow at work to yet again open my app and see if it still sucks. Any help would be appreciated. Thanks, Andrew
  20. Hi, I'm testing out the draggable demos from this site on a Samsung Galaxy S2 GT-I9100 Android version 4.1.2 in the stock browser and I cannot actually drag anything, the draggable item moves to the correct place upon drag ending but does not move around whilst being dragged. Are you aware of this problem and do you know if it's fixable? Cheers
  21. Hi guys, I have a simple tween that tweens the opacity and scale of an element. It's made up of a number of child divs, some with with background images TweenLite.fromTo(elm, 1, { scale: 0, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); Here's a video showing the problem. https://plus.google.com/photos/117519930315665299724/albums/6016203100500855073/6016203101346895106?pid=6016203101346895106&oid=117519930315665299724&authkey=CNaF7OT_gJGA1QE @0:01 - The above tween is run @0:04 - I run another tween which just returns the scale and opacity to 0 @0:10 - I set the elements display property to none @0:15 - I set the elements display property to block @0:19 - Tween scale and opacity to 0 @0:23 - Tween scale and opacity to 1 So at @0:15 it's rendered correctly. but again @0:23 is not again. I assume this is actually a browser issue, it doesn't think i needs to redraw the element after the scaling. The odd thing is though that if I only ever scale from .5 instead of 0 then there are no rendering issues. TweenLite.fromTo(@elm, 1, { scale: .5, opacity: 0 }, { delay: delay, scale: 1, opacity: 1, ease: Power4.easeInOut } ); (it's all fine on chrome desktop)
  22. Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex
  23. Hello All, I am developing an app on android using phone gap. I am using timelinemax for animation. My animation is like this : one object is animating along with scroll animation. Animation works fine after scroll is completed. when both run simultaneously then object animation is poor. Is there any workaround for this ? Android Tested : 4.0 to 4.2 My second concern is that how we can achieve more smooth animation by force3D = TRUE or by Tweenmax.set(obj,{z:0.1}); ? Any help would be appreciated.
  24. Hello All, I am doing animation like this http://jsfiddle.net/g2kxL/. in phonegap 3.0 android. When my animation run for first time, animation is not smoother. and the quality of animation is almost 50% then 2nd time. After complete first loop completes it continuesly works fine. Any help would greatly appreciated.
  25. Hello, I am experiencing an edge-case error in the Android stock browser: I am using greensock to animate a "shopping cart" drawer from the top of the screen. The shopping cart items scroll horizontally within that drawer when it is extended. In order to move it, I am animating the CSS "top" property. i.e. css: {top:"+=255px", "z:0.01"} I added the z:0.01 to make it smooth on Android Chrome and iOS, but in the stock browser, it is better without that property. Also, when the shopping cart items are wider than the screen width (there is an overflow:hidden on the cart div), the shopping cart animation to open/close doesn't work at all in the stock browser unless that " z:1" is removed. Any ideas on how I can either detect the stock browser and avoid that property, or if there is a way to force it to work?
×
×
  • Create New...