Share Posted July 12, 2016 Hello guys, this animation freezing sometimes. Something wrong? Can i do this better? See the Pen xOPpro by anon (@anon) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 13, 2016 Hi nofpowerlls, can you be more specific what and when is freezing (which browser/OS etc.)? One think I would suggest if you want to get the best performance is to use absolute position in your CSS. See the Pen bf5232f100eb5505cacb8fce5450a189 by ihatetomatoes (@ihatetomatoes) on CodePen You can also create a single timeline and include all you tweens on it, instead of using delays for all your tweens. This GreenSock TimelineLite Tutorial explains how to use GSAP timelines: Hope that helps. Cheers Petr 2 Link to comment Share on other sites More sharing options...
Share Posted July 13, 2016 Like Petr, I'm not clear what I should be looking for. 2 suggestions though Avoid animating top and padding. try removing the text-shadow in the css 3 Link to comment Share on other sites More sharing options...
Author Share Posted July 13, 2016 In Code Pen is more fluid, but on my page using(firefox/chrome) on windows and smartphone not totally fluid.OBS: In chrome is more fluid than Firefox, on windows, but on mobile both browser freezing during animation.I will modify with TimeLine. Thanks!Sorry for my english! Link to comment Share on other sites More sharing options...
Author Share Posted July 13, 2016 A found the error and a possible solutioon.This animation start when i load page, so that animation load toggether the entire page.Possible solution: 1sec delay before first animation.This is correct? Link to comment Share on other sites More sharing options...
Share Posted July 13, 2016 If you manage to isolate the issue into a reduced CodePen demo, I am sure we can point out what is wrong with your code. At the moment it looks like too many plugins are affecting the layout of your page and it could be any of the other plugins causing the issue. Try the delay as you suggested, but I doubt it will help. Sorry I couldn't be more helpful. And you English is perfect, no need to apologize 1 Link to comment Share on other sites More sharing options...
Author Share Posted July 13, 2016 Thanks for the help. Delay before first animation helps me.Can i disable animate in smartphones? Link to comment Share on other sites More sharing options...
Share Posted July 13, 2016 This doesn't look like a GSAP issue. It looks like you need to only run your code when the DOM is ready and the window has loaded. // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded - meaning all images, style-sheets, and assets window.onload = function() { // animation code goes here }; }); This way you only run your animation code when the DOM is fully ready and all images, style-sheets, links, and assets are loaded. Then you woudlnt need to add a delay. 1 Link to comment Share on other sites More sharing options...
Share Posted July 13, 2016 Can i disable animate in smartphones? Hi, Actually there are several sites created with GSAP that remove or restrict their animations for devices due to limited hardware and data usage, so it's not that uncommon. Link to comment Share on other sites More sharing options...
Author Share Posted July 13, 2016 How i can do this Rodrigo? And thanks for the help! Link to comment Share on other sites More sharing options...
Share Posted July 14, 2016 Hi, It shouldn't be too complicated. All you need is detect the user agent for the most common devices or you can use a service like Wurfl in order to detect the user's device. Then, when you have that, you can store a boolean in a global variable (hopefully global for your app's scope and not the global namespace). Finally you can set up all your animation code inside an init function, and depending on the boolean value you can execute it or not. var isMobile = bool;// here goes the detection code function initAnimations(){ var tl1 = new TimelineLite(); var tl2 = new TimelineLite(); var tl3 = new TimelineLite(); // and so forth all your code here // Also using node and browserify, or Grunt, or Gulp you can create smaller // animation modules and use CLI to put them all together } // finally depending on the boolean call the function if(isMobile){ initAnimations(); } Another alternative is create different animations. For that I use an approach that is a bit more complex. I create a master object that holds all the configuration objects for the tweens and depending on how the boolean comes back use one set of configurations or the other. Another alternative is to create the config objects in two separate functions(like the code above but create two functions, one for devices and one for desktops). var isMobile = bool; var configObj = { "desktop" : { "tween1" : {x:100, y:100}, "tween2" : {rotation:180, autoAlpha:0} }, "devices" : { "tween1" : {x:10, y:10}, "tween2" : {autoAlpha:0} } }; // then create your tweens var tween1 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween1 : configObj.devices.tween1); var tween2 = TweenLite.to(el, 1, isMobile ? configObj.devices.tween2 : configObj.devices.tween2); Finally you can create separate JS files and use a resource loader to load one file or the other. In this approach (my favorite for this cases) using node makes your life quite simple: // devices file (devices.js) var t = TweenLite.to(el, 1, {x:100, y:100, rotation: 360}); module.exports.devices = t; // desktop file (desktop.js) var t = TweenLite.to(el, 1, {x:10, y:10}); module.exports.desktop = t; // this goes in your start file var isMobile = bool, tweens; if(isMobile){ tweens = require('./devices'); } else { tweens = require('./desktop'); } // now you can use your tweens 5 Link to comment Share on other sites More sharing options...
Author Share Posted July 14, 2016 Thanks so much! Very helpfully. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now