Chrysto

Hi Guys, here is a simple before/after image viewer with TweenLite + Draggable: http://codepen.io/bassta/pen/Fypuw

Hi guys, I haven't been very active recently, but for the last month ( and next two months ) are my final exams.. After 5 very hard years in university, at the age of 24, I'm going to graduate - major in Law, and no single loan taken ( paid myself all fees, books, semesters and rent ), all thanks to freelance work at nights, using GSAP since night one This wouldn't be possible without the great community behind Greensock and Jack itself. Thank you all one more time! I just stumbled upon an code I wrote for a friend, and I thought the effect would be useful to somebody, here it is: http://codepen.io/bassta/pen/hCGEb And here is one more: http://codepen.io/bassta/pen/aEkwL - fullscreen background image parallax idea

Hi, I think you need two separate Tweens - something like In and Out animation. //animate it to the place TweenMax.to($pd, 0.5, { top: 0, ease:Back.easeIn }); When you need "out" animation you can create different tween: TweenMax.to($pd, 0.5, { top: "1000", ease:Back.easeOut });

Hi, I use http://www.icenium.com/product/ion to develop/test HTML5 mobile apps. I suggest you to optimize every image possible and to use Zepto instead of jQuery ( it even have touch/swipe events! ) to keep the size at minimum I don't have any issues related to GSAP

Hi, I had quite a similar problem and then I solved it with images loaded plugin. Basically, what I did was: 1) hide initially the divs ( setting autoAlpha to 0), 2) wait the images to load 3) position items ( in your case with packery ) 4) fade in the images with some stagger delay and it worked out for me. The problem in my case was that not all images was loaded and this created some flicker... you can try to wait all images to be loaded, and the run the effect. Ico

Trust me, it is the best way to get accurate results... Because very little things ( like shadows, the types of animation etc ) can have a huge impact of performance. So I would lie if I tell you "this always performs better than"... It just depends on the case. In one of my latest projects, top/left gave me better results than x/y . It was interactive project, where a couple of elements had to be synced perfectly and using top/left was perfectly synced, while translating with x/y gave me small "jitter" that was very unpleasant for eye And I had to use the top/left Good luck with the project, Ico !

Hi , I think you can get the right answer by doing some tests on your own - create simple animations both ways and then measure the time and performance. There's a video of Paul Irish ( http://www.youtube.com/watch?v=NZelrwd_iRs ) testing CSS top/left vs 2D transforms... It explains very well the basics of testing process. You can do something similar and test the performance with arrays and with adding one by one animations. It would be nice to share the results. Also, note that on different browsers the results may vary.

I'm not really sure about being a problem with logic or with Edge Animate. I have almost non experience with EdgeAnimate. Btw the way I work is to create and test all components separately ( something like unit testing ), so when I know that some piece of code is working, I add it to the other code ( in your case Edge Animate ). I would suggest you to create pen, demonstrating the current behaviour, to post back what's the problem and the desired behaviour, and once everything is working you can implement it in EdgeAnimate. If it is not working there, probably the problem will be in the EdgeAnimate. You provided a JS code, but without the actual markup and styling it will be very difficult for me to help you. Cheers, Ico

Hi, just add the onComplete callback to .to(Year, 2, {autoAlpha:1, onComplete:glow(YearGlow)}); It would be great if you create a pen ( codepen.io ) , so I can edit your code and see the changes. Cheers, Ico

Hah Jamie, I think your code is even better... It is nice to see different approaches to do a task. I personally prefer to cache my objects and reference them rather to pass them as a parameter. Nice work!

Hi and welcome to forums, I would suggest you to create function ( for example flick ), and then run it at the end of the tween, using TweenMax onComplete handler. Here is some pseudocode: var $box = $(".box"); function flick(){ TweenMax.to($box, Math.random() * 0.5 + 0.5, {opacity: Math.random(), onComplete:flick}); } flick(); By using this method, every time the function is executed it will generate new values ( for time and opacity ) Update: Here is working pen: http://codepen.io/bassta/pen/IkjAK Cheers, Ico

Hi Guys, A lot of times, when I see some cool effects on webpage, I try to recreate them for a couple of minutes with TweenMax, without digging the webpage code. I create these little "snippets", and later I play with them. I start this topic as a place to share such a snippets / little pieces of code Here are two from this week: http://codepen.io/burnandbass/pen/eIyrd - header animates on scroll ( see fullscreen http://cdpn.io/eIyrd ) ; http://codepen.io/burnandbass/pen/Eicla - one page website concept ( see fullscreen http://cdpn.io/Eicla ) and an old one: http://codepen.io/burnandbass/pen/cvdjG - lava-lamp like menu concept ( see fullscreen http://cdpn.io/cvdjG ) All my code is released under WTFPL license, so free to modify/distribute it It would be great if more people share such a snippets in this topic

Hi, sorry for the mistake. I thought you're animating with timeline on scroll. I don't have android device available at the moment, but when it's possible, I'll try to find a possible solution. It would be great if you provide very simple pen demonstrating the effect.

Hi, I would recommend you throttling the functions executed onScroll ( see http://benalman.com/projects/jquery-throttle-debounce-plugin/ ). Some android browsers have one problem - they don't dispatch scroll events, they dispatch inly one at the end of the scroll ( similar to debouncing ), other dispatch it very poorly... I had to make a navigation that highlights on scroll and it worked great, except in mobile browsers.... So I nailed it up to two choices: 1) Start a timer at the beginning of scroll, stop it at the end of the scroll and sync your animation with the timer (when it fires) 2) Use tweenMax Draggable+ThrowProps plugin and sync your animation with onThrowUpdate / onDrag. I went with the second option and it worked well for me.

Hi, I just saw the demo... The website looks great! The one thing missing ( you will probably implement it ) is the smooth scrolling between sections and the selection of the menu on scroll. I wrote such a functions a couple of weeks ago ( demo : http://kabakum.panayotov-consult.com/bst2/ ) just to play with the effect... If you want to keep things simple and implement such a behaviour ( smooth scroll / select menu on scroll ) without external plugins, just drop me a line

Hi Rob, As easy as it might seems, carousel is actually very tricky stuff. You can easily do very basic one, but most of the times this is not the case. You can have multiple items, slideshow, external navigation, pause on hover, responsive layout, iPhone/iPad bugs, etc... I personally prefer to create my own carousel for every single project, that implements ONLY the functionality I want - this keeps the code simple and optimised. If you have some specific question about creating a slideshow/carousel , or want to show you how to create specific type (ex with multiple items, only external navigation, how to create pause on hover, how to hide slideshow before all images loaded) I'll be glad to help

I think TransformManager JS would be better than FabricJS plugin

Hi and welcome to the forums, This seems like an issue with the gallery itself rather than TweenMax. If you provide the gallery name ( or link to the website ) I can give you more information. One thing you could do is 1) to find the elements ( arrows, close button ) that trigger the desired behavior 2) to listen for key events 3) once left arrow or right arrow or escape is pressed, you make the element that triggers desired behavior dispatch click event ( simulate mouse click) It would look something like this: var keyboardKeys = {left: 37, up: 38, right: 39, down: 40, escape: 27 }; var $arrowLeft = $(".arrowLeft"); var $arrowRight = $(".arrowRight"); var $closeLightbox = $(".closeLightbox"); $(document).keydown(function (e) { var keyCode = e.keyCode || e.which; switch (keyCode) { case keyboardKeys.right: $arrowRight.click(); break; case keyboardKeys.left: $arrowLeft.click(); break; case keyboardKeys.escape: $closeLightbox.click(); break; } e.preventDefault(); });

Hi, You can use jQuery to remove the class at the end: http://codepen.io/burnandbass/pen/bCrgw

Hi, Have you tried to use KineticJS? There's tutorial on blurring on http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/ . Then you can use GSAP KineticPlugin to tween the filterRadius and redraw the tween onUpdate() method. I'm unable to make you pen now, but should be something like this: TweenLite.to(darth, 5, {kinetic:{filterRadius:0}, ease:Power3.easeOut, onUpdate:drawLayer}); function drawLayer() { layer.batchDraw(); } Update: here is demo: http://cloud.bassta.bg/kinetikjs.html Source attached: http://cloud.bassta.bg/kinetikjs.zip

Hi, There is an online app from the user @Onlymega and you can check it at http://html5maker.com/ .

http://codepen.io/burnandbass/pen/evLmw Hm, and how about this? You pause the timeline, then seek(time) and play() it

Hi and welcome to forums, http://codepen.io/burnandbass/pen/rHyen See if this is working for you. After I create the timeline, I set the progress to 0 and pause it. Then I use play() instead of seek() to play it.

Cheers mate, If you're not familiar with Chrome developer tools I suggest you reading http://www.html5rocks.com/en/tutorials/developertools/part1/ and start using them. You can observe element, change the DOM, see computed styles... One other catch - if you're used to digg into other people's code, use http://jsbeautifier.org/ to re-format obfusticated code. I love reading code written by smarter programmers than me ( this happens to be 90% of all the code I read ) so this two utilities comes very helpful

Hi, Actually, there are two icons: http://co3.lemouv.fr/assets/img/common/buttons/chip-01-off.png and http://co3.lemouv.fr/assets/img/common/buttons/chip-01-on.png The one is with glow, the other - without. They're stacked one over another. You just infinite fade in and fade out the "on" icon (the one with the glow)