CraigWheatley
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by CraigWheatley
-
-
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/
-
1
-
-
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
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
-
6
-
-
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.
-
2
-
-
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.
-
1
-
-
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:
See the Pen qNOvbJ?editors=1010 by craigster1991 (@craigster1991) on CodePen
-
1
-
-
Are you refering to the 'new conversation'/action button on messenger? If so this is a start to what you want:
See the Pen EKzYVV by craigster1991 (@craigster1991) on CodePen
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.
-
4
-
-
I really like the idea of videos with tips and tricks - although a few years back I found that Carl had already done some!
-
1
-
-
Also worth noting that some game platforms (Phaser.js for example) have alpha properties on their sprites, and not opacity.
-
-
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:
See the Pen GZGBKY?editors=1010 by craigster1991 (@craigster1991) on CodePen
-
2
-
-
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")-
2
-
-
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:
See the Pen eZrxJY by craigster1991 (@craigster1991) on CodePen
Take a look here for the jQuery CSS docs:
-
3
-
-
You can use a string to pass in percentages to Tweenmax:
TweenMax.to(this, 2, {height:"100%", width:"200%"})-
3
-
-
-
4
-
-
It feels like much the same issue. Mostly occuring on chrome intel/nvidia cards.
I'll be keeping an eye on the chrome bug and if this issue remains once it's solved I'll report a new bug.
-
3
-
-
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 MiniOS: 10.10.5GPU: intel hd 4000Browser: Chrome 49.0.2623.112 (64-bit)
I get the same issue on my laptop:Windows 10 ProGPU: Nvidia GTX 765MBrowser: Chrome 49.0.2623.112 mAnd my phone:Xperia Z3 Compact Android 5.1.1GPU: Adreno 330Browser: 49.0.1626.105 -
I'm getting the exact same issue with the CSS animations you've posted - on seemingly every device and browser I test...
I've made a rotation based animation in TweenMax and run it on my phone (Xperia Z3 Compact) and it also glitches: -
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(){ tl.pause(); tl.progress(0); }A codepen is here:
See the Pen ZWxWWW by craigster1991 (@craigster1991) on CodePen
Then to start it again simply play it:
tl.play();
-
3
-
-
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?
-
Yes I see the same same stuttering on Blake's Codepen and a recording of mine shows the same result:
https://www.youtube.com/watch?v=sHPQMmpWDD0&feature=youtu.be
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...
-
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
Issue with TimelineMax .pause()
in GSAP
Posted
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(); });