Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Agstya Krisna

GSAP animation on iPad

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello All,


I just start learn and using GSAP animation from 3 days ago, and I really enjoy it and love it now :)


I still bulding some iPad app which is use HTML 5 and GSAP for the animation, the animation is really simple.


I used GSAP plugin for jQuery for all animation include for scroolTo, when I tested on my web browser ( Safari, Firefox and Chore ) the animation going faster and smoother, but when I runing the app and tested on iPad the animation is slow and not smooth like on web browser, the worst animation is when I tried animated scroolTo, the animation is very very slow, others animation is fast but not so fatser like on web browser.


In one page I have 16 div with each div has height 1024 x 766 is mean I have 16 page to scrool down, and every div have 1 image with size 1024 x 766 but only 11 div and have 4 gallery slideshow which have 5 image slideshow on every each div slideshow and the last div I have 1 panorama image using KRPANO 360, it mean I have 31 images on one page not include 1 panorama images.


Is that all the structure make My animation going slow when runing on iPad app??sometime when I tried doing scroolTo I got waring Received memory warning from my xCode.


And here is my code for scroolTo

TweenLite.to(window, 2, {scrollTo:{y: topPos, onComplete:clearContentEffect('s')}, ease:Power3.easeInOut});

and I add this into my library to call GSAP

document.write('<script type="text/javascript" src="scripts/greenmax/TimelineLite.min.js"></script>');
document.write('<script type="text/javascript" src="scripts/greenmax/TweenMax.min.js"></script>');
document.write('<script type="text/javascript" src="scripts/greenmax/ScrollToPlugin.min.js"></script>');

Is anyway for me to make the GSAP animation going faster and smother like on web browser?


If anyone have same problem like me please share here and if anyone know how to solve it please let me advice.


GSAP is a best animation platform now :D


Thanks all and I apologize if my English is bad.


Link to comment
Share on other sites

HelloAgstya Krisna, and Welcome to the GreenSock Forum!


I really cant see what is going on in your code... but i have  a couple of questions

  • What version of the IPAD and IOS are you using?
  • Are you using the latest version of TweenMax? 
  • If you load TweenMax than you wont need to load TimelineLite, since TweenMax includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, and so much more. View TweenMax doc's.
  • Is there any reason why your not just writing the script tag in html to include your scripts, instead of using document.write()?

Also if you create a code example, it will go along way to helping you. Here is a video tut by GreenSock on How To Create a codepen demo example.


This way we can see your code in action in an editable environment. :)

  • Like 3
Link to comment
Share on other sites

Jonathan asked all the right questions. A codepen demo would REALLY help, as it's tough to troubleshoot blind. There are many, many things that could be slowing your app down. 


Scrolling is notoriously difficult for iOS devices (and probably any mobile device with limited processing power), especially when there are a lot of large graphics to render (which has nothing to do with GSAP). Typically performance problems are related to graphics rendering, not animation code execution. 


Minor note: you nested your onComplete incorrectly, and I think you were calling the function immediately instead of referencing the function itself for the onComplete: 

TweenLite.to(window, 2, {scrollTo:{y: topPos, onComplete:clearContentEffect('s')}, ease:Power3.easeInOut});

TweenLite.to(window, 2, {scrollTo:{y: topPos}, onComplete:clearContentEffect, onCompleteParams:['s'], ease:Power3.easeInOut});
Link to comment
Share on other sites

Hi Jonathan,


Thanks for you quick response :)



1. I'm using iPad 2 WiFi, with os 7.1, I think that is the latest os.

2. I'm using TweenMax 1.11.6

3. Owhh Ok, that really bad, I will fix it, thanks :)

4. Since I meet with GSAP, I already have 50 pages HTML file, I think it will easy if I just write or include the TweenMax from JS file instead open 50 html file and include one by one onto header HTML.


And please have a look my code here

See the Pen KaAsD by edy-fulqentius (@edy-fulqentius) on CodePen


Thanks again for your help Jonathan

Link to comment
Share on other sites

Dear GreenSock admin,


Thanks for your quick response :)


Hmmm is maybe the problem come from rendering the image and krpano image 360???

Because if I try scroll in a view article like maybe 3 or 5 article scrool down the scrolling is faster and smooth. :)


I just fix my minor code :)


Thanks a lot

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.