Michael71
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Michael71
-
To import images for a non-pro account you can use free hosting websites like photobucket and link them from there as they provide a url to use as image source, and it works for cross-domain linkage. For the fill you can fill the outer element like this: TweenLite.set("path1",{fill:"#ff0000"}); And the inner like this for transparency (I haven't tested this on svg but it should work I guess) TweenLite.set("path-inner",{fill:"rgba(255,255,255,0)"});
-
The duration of the tween is extremely fast to practically capture the active state. Have you tried this scenario with a duration of 2-3 seconds? So that the click is properly triggered while the tween is animating? Also where is the "next" class added? Is it ever going inside the first "if" statement? You could post a codepen example, so that we can test and apply different solutions.
-
Try this: var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut}); $("#button").on("click", function(e){ if(tl.isActive()){ e.preventDefault(); // this will also stop <a> tag links e.stopImmediatePropagation(); // this will stop event bubbling return false; } }); Basically you need to check if the animation is running from inside the event trigger callback and cancel it.
-
Thank you, yes that is what I was looking for, sometimes we have to think out of the box right?
-
Hey Carl I see what you mean, the codepen example doesn't work though, it throws the Codepen 404 equivalent.
-
You can use the event that gets passed by default inside the click handler $(".ss").click(function(e){ var selectedItem = $(e.currentTarget); t.to(selectedItem, 4, {rotation: 360, ease:Bounce.easeOut}); t.play(); }); Mind that reverse is applied to the whole timeline effect, if you want individual tweens that can be reversed you might want to try TweenMax/Lite.
- 1 reply
-
- 3
-
-
Hello, I was wondering how could I limit a draggable movement only diagonally towards top-left and bottom-right. Thanks guys!
-
Maybe something like: TweenMax.to(myItem, 1, {width:"100%", onComplete:function(){ TweenMax.set(myItem, {width: 'auto'}); // this will set the width to auto immediately //or TweenMax.to(myItem, 1, {width: 'auto'}); // this will animate it }}); If I understood correctly...
-
For non-canvas and only webkit based browsers you could try these properties: -webkit-filter: blur(5px); filter: blur(5px); But not all browsers support filter property yet.
-
Maybe this post will help you if I understand correctly: http://greensock.com/forums/topic/8113-svg-path-animation-or-help-convert-path-to-bezier/
-
As far as I understand when a tween is defined it "stores" the position of the item that is about to tween and then animates it (starting or ending positions I guess depends on the .from or .to declarations). In your case that "starting/ending" position has changed while the animation was running (that is logical since the animation repeats so it never ends) and whilst the css position changed from 55 to 0 the tween doesn't know that. That is why we try to run invalidate which clears starting positions. more info here: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/ One way would be to add the following on the resize event: var tm = new TimelineLite({}); window.onresize = function(){ tm.kill(); tm.invalidate(); tm.restart(); }; I hope I'm making more sense now. The point is that if the css that the tween is affecting changes, the tween needs to be updated.
-
Yes I see it now, it actually makes sense, since what the media query is saying is that it should end up at 55px from top, and the tween only states where it should start from (which is -200 pixels). If you see the #thing box ends up at 55pixels from -200 so the "from" works correctly I think if you add something like this: var intro_timeline = new TimelineMax({repeat:-1, onRepeat:function(){ TweenLite.set("#thing", {clearProps:"all"}); intro_timeline.invalidate(); //intro_timeline.restart(); }}); intro_timeline .from($('#desc'), 2, {top:"-200px"}) .from($('#thing'), 2, {top:"-200px"}); Fixes the issue, basically the tween needs to update its starting positions You can view the forked codepen here: http://codepen.io/netgfx/pen/NPNzqo for a more snappy but expensive solution you could invalidate onUpdate but I wouldn't recommend it. As a rule of thumb I find .to or .fromTo functions to be less confusing and offer more control. I hope it helps.
-
To kill all tweens you could run TweenMax.killAll(); or more specific TweenMax.killTweensOf(myObject); (myobject is any selector or jquery object) Now apart from that I could not see the problem you are describing, for me the boxes kept on coming down even while I was re-sizing the browser, even when I opened the chrome mobile emulator. The problem you are experiencing it might be due to intense framing, meaning that for some reason the CPU is running very intensively so you might experience those effects.
-
Yes that is exactly what I was after, dammit I need to use timeline more... So the trick here was to animate the z and have "transformOrigin" defined at the start as well as "perspectiveOrigin" Thanks for that!
-
You can use: TweenMax.getAllTweens() As described here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/getAllTweens/
- 1 reply
-
- 1
-
-
Hello, I'm trying to create an effect that several boxes that overlap are rotated and then each one expands from the other in a 3D way. The only way I found that does that is by modifying the transformOrigin property. But unfortunately that property does not animate and simply goes into position. Is there a better way to achieve this? (the codepen sample should illustrate the animation that I'm describing) Thanks. Here's the codepen again: http://codepen.io/netgfx/pen/EaKPdP
-
I think that happens because the 2nd and 3rd shapes have more than one strokes. It may appear as one path but as far as I can see it is not continuous. You could count the svg length by using the following code: var path = document.querySelector('.obj1 path'); path.getTotalLength(); Also since this a percentage tween, svgs with shorter paths will be completed sooner.
-
As stated in GSAP homepage http://greensock.com/gsap
- 6 replies
-
- 2
-
-
- javascript
- backwards
- (and 3 more)
-
By scaling the html element everything inside is scaled also, which I think forces more drawing for the cpu/gpu. -
I think trying to scale the whole html element (page) would have an enormous impact on performance among other things. What I would advice is to have an inner container like <div class="mainContainer"></div> And include everything in there and scale that (if that is desired). Also make sure to include the following meta tag in the head of the html page: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0"> Also to find which is the correct ratio and size of the page try the following: var w = window.innerWidth * window.devicePixelRatio, h = window.innerHeight * window.devicePixelRatio; I hope this helps somehow. However since I struggled a lot with gaming my self I ended up using an excellent framework called Phaser.io which is rumored and petitioned into using GSAP library for its tweening engine.
- 6 replies
-
- 3
-
-
- viewport
- dimensions
- (and 4 more)
-
I used GSAP recently in 3 banner templates that were made with Google Web Designer and it was fairly easy as it is actually basic JS/HTML. I haven't used it with the timeline mode though just plain javascript.
-
Yes it sure is possible, actually SplitText what it does (among other cool things) is to split a text into letters, words, etc. As Blast.js does the same thing it applies a class to those "splitted letters, words, etc". Then it is as simple as animating any other element. TweenMax.fromTo(".blast", 1, {autoAlpha:0}, {autoAlpha:1}); You can view an example with splitText here: http://codepen.io/netgfx/pen/cmDpr Basically you can fork my example and use blast.js to split the letters/words and if you keep the same class it will basically work out of the box. Note that in my example I use the .revert() function of SplitText that actually un-splits the "splitted letters/words" and makes it whole again.
-
I'm not sure if it will do the trick after this, but you could try not to base64 your SVG, as stated in this article: http://css-tricks.com/probably-dont-base64-svg/ But since the svg doesn't exist on the DOM it cannot be referenced and thus not be changed.
-
I think one of the best ways to learn is to try and think or clone animations that you come across on the web, and try to produce them with GSAP. Something fast with Codepen or some other tool. It should help you greatly and motivate you to pick information up. Best of luck!
-
Well the short answer is that you will have a huge performance gain. However this will be noticeable on desktop browsers, on mobiles canvas offers little performance gain. I have experimented with DOM animating objects for a game but could not get passed the 30fps when items got more than 20-30. Whist with Canvas over 100 items did not drop the frame rate below 60fps. Of course both experiments were done using GSAP as the animation engine. Also I was using KinectJS for canvas manipulation.