Jump to content
GreenSock

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

styke

Members
  • Posts

    24
  • Joined

  • Last visited

Posts posted by styke

  1. You can view the site here: http://hpbdbrii.meteor.com/

     

    Site is very buggy and in progress, but the core of the issue is visible when you try and open the card by dragging the front cover - the applied Matrix3D transformation seems to shrink it in width, even the this is the code that's updating it in my animation ticker function: 

    TweenLite.to(options.el.$left, 0, {
        force3D : true, 
        transformOrigin : 'center right',
        rotationY : currentState.leftY, 
    });

    If you open the console you will see I'm outputting the intended rotation of the element. If I set the transformation with jQuery, like so: 

    options.el.$left.css('transform', 'rotateY(' + currentState.leftY + 'deg)');

    The element will be correctly transformed. Let me know what other information I can provide. 

  2. Hey, 

     

    I'm initializing a draggable instance with the following parameters (simplified):

    var drag = Draggable.create("main .hide-scrollbar", {
    	type:"scroll", 
    	throwProps:true,
    	lockAxis: true,
    	force3D: true, 
    	edgeResistance : 0.3,
    	dragResistance : 0.1,
    	maxDuration : 0.5,
            //Nothing I put here works 
    	bounds : { maxY: value },
    	snap : {
    		x  : function(){}
    	},
    	onThrowComplete : function(){}
    });
    

    As commented, none of the bounds I set are working. Why is this? I need to be able to control the scroll top min/max values because the inner content I'm dragging is of varying height, and I need to keep it fully within the screen at all times. 

     

    The only way I've found of doing this otherwise is by explicitly setting the draggable element's height manually, however the app I'm building is for mobiles and the reflow is too expensive. 

  3. Hello styke,

    • What is the Android device and Android version that you were testing on?
    • When animating GSAP are you setting force3D:true to force hardware acceleration?
    • What was the code that you were using that was causing Android Stock Browser to lag?
    • Are you animating top, left or x, y ?
    • Do you have lots of images and assets your animating at once or large images?

    I will be willing to help see, if i see this lag on my Android Devices:

    • Phone (Samsung Galaxy S3 - Jelly Bean 4.3)
    • Phone (Samsung Exhibit - Jelly Bean 4.1.2)
    • Android tablet (Galaxy Tab - Jelly Bean 4.3)

    I haven't seen that type of lag on my Android devices.. but I will be more than happy to help test on my Android devices :)

     

    Hey! I was testing on Samsung Galaxy s3 4.3

    • As I the actual element that was being animated was not animated by GSAP, I had to set 3D rendering to the elements myself. 
    • The code that was causing lag was simple, just adding classes with some CSS transforms to elements with transitions very quickly in a recursive function something like this: 
        var shuffle = function () {
    
            var _this = this;
    
            if (this.rouletteSpinning) {
    
                el.removeClass('show');
    
                    //some more logic
                    
                    //Select an element based on a random logo slug from the logoSlugs array
                     $('#'+rouletteClass.activeType + '-freebies').find($('[data-slug="' + rouletteClass.logoSlugs[Math.floor(Math.random() * rouletteClass.logoSlugs.length)] + '"]'))
                        .addClass('show');
    
                    setTimeout(function () {
                        _this.shuffle()
                    }, x)
    
            }
        }
    
    • I am animating the rotation.
    • I have lots of images, many of which are large. However I've found that switching on GPU rendering on them, even if they're not being animated, is a good way of increasing page framerate. 

     

    Thanks so much for your offer, I will PM you a link once it is a little more developed! 

  4. Thanks for reporting your findings! I'm curious - have you tested this on iOS and Windows 8 tablets? I have noticed that there's a HUGE performance disparity between Android, iOS, and Windows 8. So it might look buttery smooth on certain Android devices with CSS transitions, but much more jerky on other devices. Android favors CSS transitions of transforms just like iOS6 used to, but iOS7 was a massive step backwards performance-wise for those and I wonder if future versions of Android may suffer a similar fate. I have no idea, of course - I'm just curious about how much testing you've done. 

     

    To be fair, I haven't tested it on iOS - I will rename this (can I rename topic titles?) to be specific to android browsers, and update in regards to iOS as soon as I've done some testing.

     

    Hopefully android won't follow suite anytime soon! It took me way too long and cost way too much to figure out how to get it perfectly smooth! 

  5. This has currently only been tested on Android, so take it with a grain of salt for now. 

     

    So if you've used draggable on some mobile devices, you may have noticed that the animation was choppy, even after all optimization you can think of (I'm looking at you, stock android browser). Even if you did get it smooth you may have not been able to use any other effects on the page as it would cause stuff to lag up, especially if what you are animating is quite large. 

     

    I've found a way around this by incorporating native CSS transitions into the throwprops animation. The throwprops/draggable combo I used was for rotation, but I'm sure it won't be hard to incorporate this technique for other types of interactons. Take a look: 

    //I initialize on a faux element that also happens to 
    //be the trigger area. We will animate the actual element later on
    rouletteClass.rouletteObj = Draggable.create('#interaction', {
        type: "rotation",
        throwProps: true,
        resistance: 1000,
        maxDuration: 10,
        onPress : function(){
            //make sure the element you want to be animating has 
            //something like transform: translate3d(0,0,0) set in css
            //so that it is GPU enabled
            //
            //Also, I use a great plugin, PrefixFree (http://leaverou.github.io/prefixfree/) to
            //automatcally add prefixes to any css set in javascript
            
            //reset position of draggable object
            $('#spin').css({
                //android %$#@#$ stock browser transition fix,
                //otherwise transition won't stop
                'transition' : 'all .001s linear',
                'transition-delay' : '-100s',
    
                //reset current position
                'transform' : 'rotateZ('+this.rotation+'deg)'
            });
        },
        onDrag : function (){
            var _this = this;
            //let user move drag element
            $('#spin').css({'transform' : 'rotateZ('+_this.rotation+'deg)'});
        },
        onDragEnd: function () {
            var _this = this;
    
            //Set up a transition for the calculated duration of the tween.
            //I had to use the crazy easing timing to appease the stock 
            //android browser once again
            $('#spin').css('transition', PrefixFree.prefix + 'transform '+ _this.tween.duration() +'s cubic-bezier(0.165, 0.84, 0.44, 1)');
    
            //Set a transform to carry it to the tween's end position
            $('#spin').css('transform', 'rotateZ('+_this.endRotation+'deg)');
    
        }
    }); 

    It still needs a little bit of cleaning, but you get the idea. As I started doing this, I was able to add alot more effects on the page (also via CSS properties), and even on the weakest devices in stock android browser, they would all work buttery smooth! Hopefully this helps someone.

  6.  

    A few questions:

    1. What do you mean by "kill the animation but leave the tween working" - isn't the tween the thing doing the animation? I'm confused about what you want stopped and what you want to continue. Do mean the velocity tracking? 
    2. Are you only pursuing CSS Transitions because you think they'll perform better? If so, please make sure you read http://css-tricks.com/myth-busting-css-animations-vs-javascript/. They're often slower. Have you tried setting force3D:true on the elements that you're animating? That may help. 

     

     

    I'm sorry, I'm finding it hard to find the right terminology for my problem. Put simply, I need just the velocity tracking to continue as normal. 

     

    In regards to the transitions, I want to see how it works with other effects on the page. Otherwise any other animation effects on the page cause the throwprops animation to lag on mobile devices... 

  7. Each Draggable instance (that has throwProps:true) has a tween property as described in the docs:

     

    tween: The TweenLite instance that gets created as soon as the mouse (or touch) is released (when throwProps is true) - this allows you to check its duration or pause/resume or change its timeScale or whatever you want. Keep in mind that a new tween is created each time the element is "thrown". You can easily get it when the user releases the mouse (or touch) by referencing this.tween inside the onDragEnd callback.

     

    http://api.greensock.com/js/com/greensock/utils/Draggable.html#tween

     

    The pen below illustrates killing the tween and getting its duration onDragEnd:

    See the Pen 96452e2e1b51e29aa2534d959cfbabd6 by GreenSock (@GreenSock) on CodePen

     

    Does that help?

     

    Also, curious to know how your CSS transition approach works out.

     

    Elsewhere in my program I use `ThrowPropsPlugin.getVelocity(this.target, "rotation")` to get velocity and switch the numbers as the roulette spins, getting progressively slower until the animation stops. I have the math skills of a hammer and would not be able to write something similar with just the time and initial velocity :)

     

    The problem with kill is that it kills the whole tween - even the behind the scenes stuff mentioned above. 

     

    Ideally a solution would kill the animation, but leave the tween working in the background.

     

    I'll post a seperate thread if this idea works out. 

  8. Hi, 

     

    I'm making a small HTML5 roulette game. Draggable has so far proved very useful, but I'm running into some problems with performance while the roulette is spinning after it has been let go. 

     

    I have done everything possible to optimize the animation, and while it is smooth, as soon as I add in effects elsewhere it starts to lag.

     

    I have an idea to see if I can increase the performance even further: use draggable to gauge the velocity and duration of the animation, and then set a CSS transition to smoothly spin the roulette to a final state. 

     

    First off, I need a way to disable the tween initiated by GSAP when the user spins the wheel. I have not been able to find anything that would let me do this in Draggable's documentation yet. 

     

    I've found that calling this creates an effect of animation stopping:

    onDragEnd : function(){
        this.disable();
        this.enable();
        // or 
        this.pause();
        this.start();
    }
    

    This stops the animation, but my current program uses the velocity tracker to work - I was wondering if there's a different way that wouldn't require me to reprogram other parts of my script. 

     

    Also, is there a way to find out the end rotation degrees/how many degrees the wheel is planning on turning for? This would make my code much cleaner and simpler when feeding in the CSS transition.

     

    Missed the endRotation property first time round, my bad :)

     

    Thanks

  9. Thanks for all your advice guys. 

    I wasn't able to optimize Draggable and Throwprops this time, however I found that for my requirements (smoothly scroll a container horizontally, manipulate DOM based on container's X position) it was easy enough to do using a combination of stock android browser scrolling, setInterval and jQuery Mobile's scrollstart and scrollstop events. The caveat is that iOS safari doesn't work so well with these events so I had to check which OS the user is on before initializing the appropriate code (thankfully Draggabe and throwprops go with iOS like bread and butter).

  10. Hi all! 

     

    I'm starting to optimize a site I'm building - I've run into some serious performance issues in regards to Android's stock browser when using Draggable and the throwprops plugin. Every where else it works relatively perfect. 

     

     

     

    I initialize draggable for this page on line 336 of main.js, it's a pretty big function as I initialize all the code to identify when the slide changes section and code to animate the top little menu type thing. 

     

    If you swipe around you'll notice the elements inside #profile-bottom .inner toggle visibility:hidden if they're off screen. It's unfortunate but this doesn't increase performance by as much as I'd hoped.

     

    For some strange reason the slide container has to have overflow set to auto, otherwise the layout fucks up. Not sure if this makes a difference, but there you go. 

     

    Please, recommend me how I can get the animation smoother on android. It's really choppy at the moment! 

    Thanks! Good night :)

  11. My aim is to create a continuous animation of clouds sailing across the page. As the clouds load, they are added to an animation queue, which is processed every x amount of seconds. These two simple functions are what I'm trying to use to give the effect of the clouds sailing by infinitely and randomly.

    var floatCloud = function(cloud, time, floatTo, resetY){
    
         TweenLite.to(cloud, time, { ease: Linear.easeNone, x : floatTo, onComplete : function(){
            this.invalidate();
            resetCloud(this.target, resetY)
         }});
    }
    
    var resetCloud = function(cloud, y){
    
        console.log('Cloud being reset: ');
        console.log(cloud);
    
        cloud.css('transform','matrix(1, 0, 0, 1, '+  -cloud.width() +', 0'); 
    
        if(y){
            cloud.css({
                'top' : Math.floor( Math.random() * $(document).innerHeight() - cloud.height() )
            });
        }
    
        floatCloud(cloud, 12, $(document).innerWidth() + cloud.width(), y);
    }
    

    However, it is not working, namely the cloud's X position is not reset. Also, for some reason, after a couple of iterations it stops animating altogether. How can I make sure that animation continues indefinitely and that the elements X position is reset properly? Also, I'm welcome to any suggestions on how I can improve these functions! Thanks for your time, take care!

     

    EDIT: Forgot to mention a couple of things - I have a plugin that automatically adds vendor prefixes to jQuery's css() function. Also, strangely enough console logs that a cloud is being reset. However the transformation matrix stays the same - and no animation occurs! 

  12. Hi, I'm fairly new to Greensock and still learning the ropes. 

     

    I'm finding the documentation quite hard to follow, and I am trying to figure out if it is possible to easily repeat an animation with the same parameters but from its end state. 

    So say this was the animation object initially passed to the tween : 

    animObj = { x : -146 } 

    Is there an option to restart the animation, so that next time round x would be -295? 

    Thank you so much! 

  13. Hi there! I've been using Draggable and throwProps plugin to create a cool x/y slider. The problem is, as soon as I start adding images and content, the touch performance becomes quite bad - a lot of the times the touch isn't registered and the animations stutter. 

     

    I was wondering - what are some good practices (if any) to optimize this kind of interaction? To give you an idea of what I'm dealing with, here's just a bit of the DOM I'm dealing with. 

    <div id="homepage-slider">
    <div id="slider-reel">
    <div class="slide" type="casino"><div class="bottom-part"></div></div>
    <div class="slide" type="poker"><div class="bottom-part"></div></div>
    <div class="slide" type="sports"><div class="bottom-part"></div></div>
    </div>
    </div>

    every .bottom-part element has a background image on it. The performance becomes especially bad when the background is resized, which is kind of important for mobile! 

     

    Thanks  :)

     

    EDIT: Maybe the mechanics of the slider play a role - if so a quick explanation. #slider-reel is an absolutely positioned element being 100% of the width and height of the container. I am able to sort the slides horizontally by specifying left: 100%, left: 200% and so on. Then I just initialize the thing with this: 

        var slider = Draggable.create("#slider-reel", {
         type:"x, y",
         edgeResistance:0.65,
         lockAxis: true,
         throwProps: true,
         throwResistance : 3000,
         snap:{
             x : values,
             y : 0 - $(document).innerHeight()
         }
        });

    values is an array of dynamically generated 'stops' off to the left of the screen, for the #slider-reel to snap to. If this information is important, and you would like to know more, please let me know! Thanks!

  14. Something i Would suggest is to have something like :

     

    [ pseudocode ]

    var is3DSupported;  //Boolean --> true or false, just one browser detection
    var animObj; //just holders
    
    
    if(is3DSupported){
    animObj = {rotationZ: 60}
    } else {
    animObj = {alpha: 1}
    }
    
    
    TweenLite.to(elem, time, animObj);

     

    You could predefine some animations, and then just use them later ( without detecting/rewriting every time ). This would keep your code tidy. 

     

    I wish I'd read this yesterday! Fantastic idea, thanks so much.

  15. Are you suggesting that GSAP does feature detection each time a tween is created and then auto-generates a substitute tween when the detection fails? Unfortunately that would damage performance and most likely produce unwanted results.

     

    Yeah... I guess I got a little too hopeful in the face of the vast feature set of GSAP! That makes perfect sense, thanks for your reply. 

  16. Hello,

     

    Here is a list of browser support for transform 3d:

     

    http://caniuse.com/#feat=transforms3d

     

    Here is a function that checks if the rotate3d() transform function is supported:

    // 

    and this is how to use it:

    // usage
    var hasRotate3D = hasTransform3D(); 
    if(hasRotate3D){
          // rotate3D is supported
    } else {
          // rotate3D is NOT supported
    }
    

    With this function you can change the CSS style transform function you are testing against.. in this case it is testing for rotate3d(0,0,0,90deg).

     

    The above function could also be modified to check for various CSS transform 3d functions like translate3d, scale3d, skew3d, etc..

     

    I hope this helps! :)

     

    I actually have that exact function in my code already! It just annoys me to no end having to rewrite animations for different browsers, things get confusing fast. I was hoping GS would handle some of that manual work for me. Im building a very animation heavy site so having these all over the place gets a bit messy. I'd even settle for some clever organizational ideas. Thanks for your input though!

  17. HI there, I'm new to this amazing plugin and can't wrap my head around a small detail. Say I would like to animate an element's rotation. I want to do it so that it will animate smoothly on mobile devices - so I call TweenLite (with the CSSplugn) like so: 

    TweenLite.to('.wheel-container', 2,  {rotationZ:360, scale: 1})

    I remember reading somewhere that in browsers that don't support a certain way of animating, GS uses a different method to animate the element. Yet now reading the documentation it says: 

     

     

    In browsers that don't support 3D transforms, they'll be ignored. For example, rotationX may not work, but rotation would. See http://caniuse.com/transforms3d for a chart of which browser versions support 3D transforms.

     

    Of course I could just test it myself, but I am currently unable to do so and I need answers fast! 

    If GS does not do this, then could anyone suggest a convenient way of calling the animations according to the users' browser capability? Or will I simply have to detect and call myself accordingly? Thanks!

  18.  

    Sure, you can tap into ThrowPropsPlugin's getVelocity() method for any properties that are being tracked. Draggable automatically turns on velocity tracking for the target based on whatever type you're using. So, for example:

    Draggable.create(".roulette", {type:"rotation",
    	throwProps:true,
    	onDragEnd:function() {
    		console.log("velocity is: " + ThrowPropsPlugin.getVelocity(this.target, "rotation"));
    	}
    });

    Thanks so much! One more question - is there any way I can return the duration of the animation? 

  19. Hi there,

     

    I'm very new to the amazing GS and having some trouble wrapping my head around it. 

     

    I've got an element I'm initializing like so: 

     

     roulette = Draggable.create(".roulette", {
        type:"rotation", 
        throwProps: true,
        onDragEnd : function(){
                  
        }, 
        onThrowComplete : function(){
                  
        },
        onThrowUpdate : function(){
    
        }
      });

    Is there anyway I can return the velocity with which the the rotation was thrown and rotation time onDragEnd? Ideally I would be able to return the velocity of the spinning roulette at any time as it slows down.

    I've tried using the track() function, but I can't get it working properly. This stuff is very confusing to me!

     

    Thanks in advance.  

×