CraigWheatley

Hello! So in your code it only took a second to see you're running .Pause() and .Resume() on the click event of btn2. $('#btn2').click(function(){ Actions[iCurrAction].Pause(); }); $('#btn2').click(function(){ //alert('C'); Actions[iCurrAction].Resume(); }); 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 $('#btn2').click(function(){ Actions[iCurrAction].Pause(); }); $('#btn3').click(function(){ // changed to #btn3 //alert('C'); Actions[iCurrAction].Resume(); });

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: http://codepen.io/craigster1991/pen/bBeVbK 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/

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 }

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 http://codepen.io/craigster1991/pen/yJvaYa 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

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.

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.

You've currently got one timeline animating all the classes for each icon - you need to split them out. There's probably cleaner ways to do this but here's a quick fix: http://codepen.io/craigster1991/pen/qNOvbJ?editors=1010

Are you refering to the 'new conversation'/action button on messenger? If so this is a start to what you want: http://codepen.io/craigster1991/pen/EKzYVV This uses Draggable as mentioned by Carl to allow the list to be dragged up and down. Then using the events from Draggable we simply play/reverse the button scaling animation.

I really like the idea of videos with tips and tricks - although a few years back I found that Carl had already done some! http://www.snorkl.tv/

Also worth noting that some game platforms (Phaser.js for example) have alpha properties on their sprites, and not opacity.

A couple i've done recently: http://ds.serving-sys.com/BurstingRes/Site-17917/WSFolders/3433592/index.html https://s0.2mdn.net/ads/richmedia/studio/pv2/42572025/20160414081727412/index.html

Hi there! Firstly, if you're using TweenMax, you don't need to reference the CSSPlugin Secondly, the tag name you're checking for is coming out as "LI" not "li". Those to quick changes and it works: http://codepen.io/craigster1991/pen/GZGBKY?editors=1010

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: myTimeline.tweenTo("myLabel")

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: $(".change").css({ backgroundColor: "hsl(" + color.h + "," + color.s + "%," + color.l + "%)" }); See this codepen for the change: http://codepen.io/craigster1991/pen/eZrxJY Take a look here for the jQuery CSS docs: http://api.jquery.com/css/

You can use a string to pass in percentages to Tweenmax: TweenMax.to(this, 2, {height:"100%", width:"200%"})