Search the Community

Hello How can I make this image gallery like that: https://asmobius.co.jp/ I realized that is written by GSAP, but is there any similar demo for GSAP or any pieces of that Image gallery (like circle navigation or scroll navigation etc.)? Please help me to make somethings like that. Thanks in advance.

Hello GreenSock community! I have a question for you. I've been working on a image scroller of some images, and got this working how'd I'd like. However my client has now requested an infinite scrolling gallery. I've done some research and found a script that seems to have the potential to do what I want to do, however it would need some modifications to behave as the client has requested. So right now this script auto scrolls a row of images, adding the appropriate image on to the end of the row with each scroll. I'd like to modify this to have it not auto scroll, but be controlled by a left and right arrow, and be scrollable to either the left or right. If anyone could help me out that would be great. Here is the code I have so far: import com.greensock.*; var startX:Number=parent_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x+=distanceToScroll; if (mc.x >= lastItemX) { mc.x-= lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Here is it moving backward import com.greensock.*; var startX:Number=mask_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width parent_mc.x = startX function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x-=distanceToScroll; if (mc.x < 0) { mc.x+=lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Let me know how to make this scroll on onclick only and left and right - I feel like it's close...

I have converted Flash banner created by @carl schooff into JS version. I think you peoples like this [ http://02cbcf1.netso...demos/zoomFade/ ]. I have a question, is there is any solution to reduce HTML file size? Because HTML file size in this demo is 560.6 KB (including all files such as html, js & images) but in Flash version, SWF size is 131 KB. Once again thanks @carl schooff for wonderful tutorials. You can find @carl schooff's Flash version here http://www.snorkl.tv...-and-tweenlite/

Hi Guys, This is my first try to create Image gallery with JS. For this I have used jQuery, Greensock & RaphaelJs. I think you peoples like this. Any improvement in code, are welcome... Special thanks to GreenSock, carl schooff & Randall for their post/tutorials. B2rana imageGallery.zip