Jump to content

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


  • Posts

  • Joined

  • Last visited

Posts posted by CraigWheatley

  1. Hello!


    So in your code it only took a second to see you're running .Pause() and .Resume() on the click event of btn2.


    Both of these run and so the animation pauses then immediately resumes.


    I'm assuming you want the resume to trigger on the click event of btn3, not btn2 ;)

    Changing the Resume event trigger to btn3 solved your issue and also made the resume button work :)

      $('#btn3').click(function(){ // changed to #btn3
    • Like 5
  2. Hi and welcome to the forums!


    This is a very basic example using divs which are selected to create an array of tweens, each in their own timeline which are offset and whatnot:

    See the Pen bBeVbK by craigster1991 (@craigster1991) on CodePen


    Bear in mind this amount of images would be slow if they were all DOM elements and so I would recommend rendering such a thing to a canvas.


    There are probably better ways to sequence them but as my demo above shows having your animating elements (images) in an array is a simple way to stagger the delay of multiple elements.


    More information on staggering can be found here: https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

    • Like 1
  3. Hi there and welcome to the forums!


    The link you provided doesn't seem to work, however from your code snippet the problem may lie with scope.


    Your timeline tl3 can access the object, this, and so it can animate this.objects.


    However inside the function endFrame, the object this now refers to the scope of that function, not the scope of the function/object that tl3 has access to.


    You can read more about javascript scope here: http://www.w3schools.com/js/js_scope.asp


    Try setting a variable to this and use that instead:

    var _this = this;
    function newScope() {
      console.log("I can now access", _this);
      //but 'this' is now the scope of the newScope function
  4. Hi there, 


    The issue in your codepen is that TweenLite does not have CSS support without the CSS plugin. 

    TweenMax does have the CSS plugin bundled with it and so it works without adding the plugin separately.


    As you can see here 

    See the Pen yJvaYa by craigster1991 (@craigster1991) on CodePen

    I've simply added the CSS plugin to the pen and it works as expected.


    You can read more about the CSS plugin here: https://greensock.com/CSSPlugin

    • Like 6
  5. Thanks, dimonise.


    As you stated there are no issues with that pen - I would suggest adding other parts of your website on the same page to see which parts break it.

    • Like 2
  6. Hi and welcome to the forums!


    Without more information there's not much we can do to help.


    The codepen url you've provided is not to your pen but to the codepen homepage. 


    Please could you provide the correct link and try to isolate the broken code inside of codepen so we can help diagnose the problem.

    • Like 1
  7. I don't have time to work up a codepen but essentially you could check if the next label is available (like you currently are) and if it's not, simply tween to the label you want.


    If you scroll down on slide9, check if a next label is available. If not, tween to label 'slide1'.

    And the same for going from slide1 to 9.


    The code for tweening to a label is:

    • Like 2
  8. Hi there!


    You were just setting the jQuery css properties wrong, this line:

    $(".change").style.backgroundColor = "hsl(" + color.h + "," + color.s + "%," + color.l + "%)";

    Is now:

        backgroundColor: "hsl(" + color.h + "," + color.s + "%," + color.l + "%)"

    See this codepen for the change:

    See the Pen eZrxJY by craigster1991 (@craigster1991) on CodePen


    Take a look here for the jQuery CSS docs:


    • Like 3
  9. I've replicated outside of codepen. I've run it locally on my machine's apache server using TweenMax and css animations. I've then run this local version on my machine in several browsers and my phone too (see my previous post).
    The elements are being translated in 3D, but the issue remains regardless if they are or not. I've tried force3D:true and z:0.1.
    autoRound doesn't help either.
    My current machine is:
    Late 2012 Mac Mini
    OS: 10.10.5
    GPU: intel hd 4000
    Browser: Chrome 49.0.2623.112 (64-bit)

    I get the same issue on my laptop:
    Windows 10 Pro
    GPU: Nvidia GTX 765M
    Browser: Chrome 49.0.2623.112 m
    And my phone:
    Xperia Z3 Compact Android 5.1.1
    GPU: Adreno 330
    Browser: 49.0.1626.105
  10. If you want the animation to repeat forever, you can use TweenMax instead of TweenLite and use the 'repeat:-1' property:

    var tl = new TimelineMax({repeat:-1});

    Or if you want it to reset and not play again, you can pause it and set the progress to 0:

    var tl = new TimelineLite({onComplete:Reset});
    function Reset(){

    A codepen is here:


    See the Pen ZWxWWW by craigster1991 (@craigster1991) on CodePen


    Then to start it again simply play it:

    • Like 3
  11. Jonathan said that adding rotation: 0.01 fixed it...


    This doesn't fix it for me - I tried on both my codepen and the one Blake posted.


    Weirdly if I run two different tweens with different times (one of the boxes one second longer) they both stick at the same time, not at a given x position. 

    If it is the sub-pixel rendering issue, would that be occurring on every tween at the same time? Like an engine issue? 

  12. Yes I see the same same stuttering on Blake's Codepen and a recording of mine shows the same result:




    This also occurs is Codepen debug, and locally on my apache server with the exact same code on the same browser.

    Adding rotation has no effect for me.


    My machine is a 2012 Mac Mini with a quad core cpu, intel hd 4000 gpu and 10gb of ram. I don't see a reason why it should be happening...

  13. I have a very simple setup with two elements tweening right and left. 

    One is using 'x' and 'force3D:true' while the other is simply using 'left'.


    Both seem to 'stick' as they move across the page, looking almost laggy.


    I'm running  Chrome 49.0.2623.110 (64-bit) on OSX 10.10 and TweenMax 1.18.0.


    I even recorded the browser with quicktime and you can see it in the video, too.


    Is anyone else getting the same result?

    See the Pen BKWxex by craigster1991 (@craigster1991) on CodePen