Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by robbue

  1. Thanks jamiejefferson :) The class was a CSS animation, but I'm now animating it with GSAP and it works fine. Also experienced some cracks at some resolutions, fixed it with a width: 101% hack and some other stuff.


    Updated the post with image for future reference.

  2. I'm making a 360° slider, or actually its more like a 160° slider:

    See the Pen 3012fd643e4724963c00cde7975f09a9 by robbue (@robbue) on CodePen


    It's supposed to animate back to head-on-image on dragend (hammer.js is used for gestures), not only snap. How could I fix this? 


    I would like some feedback to make it better because it isn't 100% smooth, and is this something Draggable & ThrowPropsPlugin could be used to, if so, how? Would be cool to have it draggable freely around with bounds limit.


    Why dont I use a plugin like 360slider?

    Where is the fun in that? On a more serious note - I may be falling back to a plugin (do you know of any good ones?), but it would be nice to use the power of GSAP to make it.


    Why seperate images and not a sprite?

    Because the final code will have a lot more frames and mobile devices doesn't support to big images.


  3. When a staggerTo is complete for a object, I want to do something with that object.


    Something like this:

    onComplete: function(obj) {

    This works, but I'm removing the class on every box on every complete. I only want to remove the class on the object that finished:

    See the Pen 178473f51886095f8541a1ce37f446ee by robbue (@robbue) on CodePen


    This does the trick, but is it possible to do it with staggerTo?

    See the Pen 43750f400ad119d1fa107843900c736e by robbue (@robbue) on CodePen

  4. Anyone experienced this bug before? Screen freezes (0:10 in video), and nothing happens before I drag (nothing happens on touch) the screen


    And it only happens when I click on a link on the website to go to the page. If I refresh it works, every time. It also works (every time) if I go to the same page as I'm viewing. I dont know if its GSAP that is the cause, but it only happens on pages where I use TweenMax. Testet on iPhone 4S (iOS 6.1.2) and iOS simulator.




    Edit: Upgrading from 1.9.3 to 1.9.5 seems to fix it.


  5. Thanks for helping me!


    I don't know if I am understanding exactly what the desired behavior is, but I'm assuming that once you click on a chapter's circle you want to jump to the appropriate label in the timeline and have it stop.


    Once I clicked it I want it to jump to the appropriate label and then start playing from that label.



    Also, I noticed you were creating individual tweens to adjust the length of the progress bar to match the amount of delay/time between the labels. Just want to point out that you can have that animation be part of the timeline and then you won't have to manually be changing the width of the progress bar.


    Thanks for the tip! I'll make the changes.



    Also I want to point out that instead of using callbacks to change the text content of your elements you can use the TextPlugin. This will enable you to have the text-changes be part of your timeline.


    I will have a look at it, I will also do some animation with the background image, so I'll need to take a closer look at it.



    Thanks again for helping optimize the code, really appreciate it! Please let me know if there is more I could optimize. I want to make a more structured code, object-oriented I guess, but need to learn it first :)

  6. Hi!


    I have a timeline with labels/chapters. It plays and a callback is executed on every label, but the problem I'm having is to make the labels clickable, so you could jump to a certain label. It's hard to explain, so I made a jsfiddle:



    When you click on a chapter the timeline jumps to the label, but the timeline is played correct after that.


    The labels and callback is added at line 136 and 137.

    Code for jumping to a label (not working correctly) is on 156, 157 and 159


    I have tried several thing without luck: currentLabel(chapter), pause(chapter, false), seek(chapter, false);


    How could I solve this?

  7. Thanks for answering!


    I was testing the files on codepen through browserstack.com.


    I have successfully tested with the updated files on IE8 (both Windows XP and Windows 7). Resolved!


    Updated test:

    See the Pen brxCE by anon (@anon) on CodePen

    • Like 2