en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en en en en en en en en en en en en fi fi en en en en en en en en en en en en en de de en fr fr en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en en en en en en en en nl en es en he zh en en en en en en en en en sv en en en fr en en en en en en en nb en nb en nb en en fr en en en en en fr en nb en fr en en ku en en en en en ru en nb en ru en en en en en en en en en fr en nb en fr en en pl en en en en en en en nb en en en en en en en en en fr en nb en fr en en en en en en en en zh nb en en zh ms en en en en en en en en eu it nb en eu it en en en en en en nb en nb en nb en en en en en en en en ru en nb en ru en en en en en en en en en ru nb en en ru en en en en ms nl fr en en en en en en en nb en en en en en en en en en en en nb en en en en en te en en en en en en fr pt nb en fr pt en en en en en en en en en nb en en en ru ru en en en en en en en en en nb en en en en it en en en en en en en en en en en en en en en en en en en en nb en en en en en en en en en en en en nb en en en en en en en en en en en ms en nb en ms en en en en en la en en en en nb en en en en en en en en en en de en nb en de en en en en en en en en en en en en en en en nb en en en en en en en en en en en ar nb en en ar es en en en en en sv ceb en en sv en en en en en de en es en en en nl en en en en en en en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
All of my search term words
Image revealing animation with GSAP
Umer Zaman posted a topic in GSAP
Alexli posted a topic in GSAP
Dear All, I love Gsap and I am working on a website full of animations using Gsap. Gsap is awesome! Recently I ran into a new problem, I am not able to do 3D transform for an   element in my SVG I have looked into many threads in here, and this one too: I am not sure what I have missed, but I am quite sure Gsap can do the 3D transform of it. Guys, please help me out. Thank you so much. Wish you All have a wonderful Friday. Cheers, Alex
Animated SVG stroke to reveal an image?
I've spent the day testing various methods to get an SVG stroke animation to reveal an image but i've come up with nothing. I've used GSAP to animate SVG's as masks, but i've never attempted to do a stroke animation to act as a mask. I've done this millions of times in After Effects, but just can't seem to wrap my head around this - if its even possible. In this basic pen i've placed a random image below an SVG stroke animation. Anyone know if this is even possible?
Scale image on mouse scroll with pan effects
Keyur posted a topic in GSAP
Hello, I am novice, but i really impressed with this. I want to make product detail page having animations like this website: https://www.etq-amsterdam.com/store/product/men/low-3-timber/ When you click on product image, it will zoom it to full screen having pan effect. Also, when you scroll it, image will scale accordingly. I think they are using tweenmax, but i didn't able to crack it. Could you please help me with this? Thanks, Keyur
can't animate image height to toggle it
pileoni posted a topic in GSAP
Hi all, i've a little problem i tried to resume in the attached codepen. Say i've layout made of many containers, and i have an image i want to be displayed with an animation, a vertical toggle. The very same code, only works if i've set, at JS line 29: .from($target.find(".myImage"), 0.5, { width: 0, ease: Power3.easeOut }) while it does not, most of the time, if i try: .from($target.find(".myImage"), 0.5, { height: 0, ease: Power3.easeOut }) What am I missing?
How to animate gradient mask of an image?
nep posted a topic in GSAP
I would like to animate the gradient mask's position from right to left on image, how do you accomplish this using Tweenmax that is compatible for most browsers specially on Chrome & Firefox? **I was able to create a gradient mask in chrome using -webkit-mask-image but mask don't work on firefox** HTML:        CSS: #myimage { background-image: url(image.jpg); width: 259px; height: 194px; }
richfinch posted a topic in GSAP
Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
Bezier autoRotate Problem - Image not middle centered along path
Technics1210 posted a topic in GSAP
Hi, i am using the "pathDataToBezier" function to follow an image (car) along an SVG path. When not using the autoRotate function (false) - the top left corner of the image is right on the path / track , but when i am using the autoRotate function "true" - the image is not x/y centered in the middle of the path and have some weird offset in the curved areas. // animate road var path = MorphSVGPlugin.pathDataToBezier("#roadPath"); TweenMax.to("#car", 5, {bezier:{values:path, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:-1}); the image is a 22x10px image, which should rotate in the middle / center of the image along the path... What do I have to change? Have a look at http://codepen.io/technics1210/pen/vmxdLz?editors=1111
Hover image scale in drupal
Dayo posted a topic in GSAP
Hello! I'm trying to create a simple hover effect on images in a 2 column gallery. I use drupal 8 and iv'e included the html code for one of the images in the gallery http://codepen.io/anon/pen/ZLPJQL The problem is that everything works in firefox but in chrome the animation flickers and the images goes invisible for a while before returning to normal (only on the right side of the gallery weirdly enough). Iv'e had this problem with chrome before and seen some threads on it but i can't remember what code it was that fixed the flicker problem. Iv'e tried setting force3d:true but it did not help. I'm using Jquery in the .js file because i got errors when i was using the original script which looked like this:   $('.tileImage').hover( function () { TweenMax.to(this, 2, {scaleX:1.1, scaleY:1.1, ease:Circ.easeOut}); }, function () { TweenMax.to(this, 2, {scaleX:1, scaleY:1, ease:Circ.easeOut}); } );   Any help is much appreciated, thanks for a great tool!
SVG Pieces to form image
Hecsa posted a topic in GSAP
Guys i really need help on this. Basically as you can see from the linked codepen i have a lowpoly lion in SVG, all made out of single triangles. At the moment i made this animation of all the pieces falling from a single spot and forming the image, but what i need is different. I need all the pieces to come randomly from all the directions, top, lef, right, bottom, all going to the center and create the lion. There is a simple way to make this with TweenMax? I dont really know how to make this and i'm not really good with Javascript. Thanks in advance!
Problem animating image inside a svg clipPath on Chrome
marcioshiz posted a topic in GSAP
Hey there, I'm trying to use TweenMax to animate an image inside a SVG clipPath. The problem is: when the transition is happening, the clipPath deactivate on Chrome and appears only after animation stops. On Safari and Firefox works just fine. Anyone can help me? Is a compatibility issue or am I doing something wrong? Thanks guys!
335 posted a topic in GSAP
Hello everyone! This is my first post here having started to learn jQuery very recently. Learning it is very exciting but there's so much to get your head around... I look at lots of websites and try to learn as much as I can. Can you tell me what would be the best way to achieve this effect- http://spain.madeforspainandportugal.com/en/ -background image looping around a circle or a path? Many thanks in advance!
Circular Slide Image - Animation
bgthedev posted a topic in GSAP
Hi, I am new here and new to greensock as well. One of my friend referred me to this awesome kit. I want to create an animation where there will be 2 different images (similar like before and after image effects with color and black & white image) but unlike, here it will be 2 different images and not a grayscale (so css property may not work). The second image will cover up/load circular motion. here is the demo I created http://codepen.io/bgthedev/pen/wzrGxJ/ In this demo the problem is, as you see, it is noticeable that I have used 2 separate images which is not proper. Is there a way to create such animation? except clip-path because that does not work with firefox Thanks in advance! BG
Blurred image on scale
Art2B posted a topic in GSAP
Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur
Placing PNG Graphic Overlay Within SVG Element
jedi posted a topic in GSAP
hi, i have made in this draggable rotating Throwprops star test file in the codepen. i wonder if it is possible to put a star shaped graphic (a PNG with transparent background) overtop of the star shape while maintaining the star as the SVG trigger element.
Animate grayscale css in TimelineMax
prabhath posted a topic in GSAP
Hi I create TlimeLineMax image gallery animation. refer below code. "tl.add(TweenLite.to(img1, 1, {delay:1, css: { 'filter': 'grayscale(0%)','-webkit-filter': 'grayscale(0%)' },ease:Linear.easeNone}));" animation was work perfectly. but grayscale is too fast. how can i slow this grayscale aniamtion. Thank you.
Best way to cycle images?
garyw posted a topic in GSAP
We're trying to use TimelineLite to create a cycle of images. We want to show one image at a time, fade between them, and at the end, cycle back to the first one and repeat. We are getting various results on different browsers. On some, it works fine. On others (*cough* IE8 *cough*), we occasionally see a cut between images instead of a fade. Other times, the wrong image appears. Our images are set up absolutely positioned at the top left in a  ; the first image is visible immediately; the rest are styled as visibility:hidden. What's the best algorithm for doing this using GSAP, given an arbitrary number of   tags (we're using jQuery, too)? We've tried a couple of ways, but the code for such a seemingly simple task gets complex quickly.
myTimeline.seek(position) if an image is loaded
Orilla posted a topic in GSAP (Flash)
Hi, I'm jumping between pages with different timelines, it's all ok, till the moment i go back to the first page (to the point it was before left) using seek function. myTimeline.seek(lastposition); where lastposition it is the position before the page was changed. I can easily check the value of that variable, lastposition, and it is right, but the seek function doesn't really jumps to that position, but a bit before, like 0.3 sec aprox, depending on how many images needs to load till that lastposition. Even forcing the lastposition to 1, the seek function do not jumps there, but a bit before. Why this is happening?
Trouble With Images and Transform Around Center (Mobile/AIR)
Slopes posted a topic in GSAP (Flash)
Hello, I am having some issues with some objects working differently when displayed on desktop compared to mobile devices. For example, the Spark Image will Transform-Around-Center correctly when used on mobile, but when used on AIR Desktop, it ignores the center and transforms around 0,0. I have created a very basic sample program which illustrates this and which I can make available if needed. The code simply goes like this: protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void { var image:Image = new Image(); // Create the new image image.source = "myimage.png"; // Set a picture grpMain.addElement(image); // Add the image to our group SpinClockwise(image,2).play(); // Create and play the animation } // This function creates the animation and returns the timeline to be played private function SpinClockwise(target:Object, time:Number):TimelineMax{ TweenPlugin.activate([TransformAroundCenterPlugin]); var timeline:TimelineMax = new TimelineMax(); timeline.add(TweenMax.to(target, time, {transformAroundCenter:{rotation:360}, ease:Linear.easeNone})); return timeline; } Below is the XML portion of the code where we declare the Group that this image will go in:     That's pretty much it. I created an AIR application and a Mobile application and imported the same Greensock library into each. Both are running the 4.6.0 compiler and require AIR 3.1 or higher to operate. Please let me know if there is something I am doing wrong or if there is a workaround to get things in sync. Thank you!
GSAP Slider Too Slow on Mobile + Image Not Visible on Slide Start
krishie posted a topic in GSAP
Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html
SplitText removes sibling image.
Rodrigo posted a topic in GSAP
Hi Guys, Quick question. I noticed that using SplitText, if the   element being passed to the SplitText tool, has an image or any other tag inside, that tag is changed into an empty   by the SplitText tool. Is this by design?.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.      The   in the code above gets replaced by an empty div. The solution I've found is wrap the text into an extra   element and pass that one to the SplitText, thus preserving the   element:     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.       Thanks, Rodrigo.
update an image loader part 2
Dcoo posted a topic in Loading (Flash)
In my last post on this subject, everything was going swimmingly with the "myImage.load(true);" being introduced to the scenario, when the user gets to the "take a picture" part of the app it works perfectly, they can retake the picture over and over and it loads the new image right away using " Object(root).faceW.myImage.load(true); " from my Camara MC. now my new problem is if they (the user)want to go back and retake the picture after clicking finished(the app at this point has moved the play head to the next frame), the retake button takes back to the frame with the Camara loader but the image is no longer updated after taking any new pictures, only f you quit and restart does the new image load. any ideas on whats happening ? import com.greensock.*;import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; import flash.filesystem.*; LoaderMax.activate([ImageLoader]); var file:String = "IMG_happy.jpg"; var mypic:File = File.applicationStorageDirectory.resolvePath("Photos/"+file); var myImage:ImageLoader = new ImageLoader(mypic.url,{container:this,x:0,y:0,width:414,height:309,onComplete:onImageLoad}); myImage.load(true); function onImageLoad(event:LoaderEvent):void { TweenLite.from(event.target.content, 1, {alpha:0}); }
Fahim posted a topic in GSAP
I have an image 600px wide X 800px high that i need to split into 200 pieces
How animate sprite image in canvas?
aleksoft posted a topic in GSAP
How to animate a sprite images in canvas using GSAP as in this tutorial is shown?
Another Flex 4 Index Out of range Problem
Atonis posted a topic in TransformManager (Flash)
Hello, I'm currently trying to implement a crop tool to our Application. My problem is that I keep getting indexOutOfRange errors from TransformManager.bringToFront either when clicking on the image I want to crop or when clicking outside to unselect it. The same application also gives me from time to time an "wrong parent" error when trying to remove the dummyBox, event though the instance passes the "_selection.parent == _parent" test just before (TransformManager.updateSelection). Both Errors seem very very weird as the range error is thrown even thought range is correct and the parent is ok. Does anyone have any clue on what I'm doing wrong ? Here's a sample app and my basic instanciation code : protected function application_creationCompleteHandler(event:FlexEvent):void { transformManager=new TransformManager(); transformManager.bounds = new Rectangle(0,0,955,600); imageCompo.image.source = "image.jpg" ; imageCompo.image.addEventListener(Event.COMPLETE,image_readyHandler); } protected function image_readyHandler(event:Event):void { trace ("complete"); // for some reason flex never tells you when the image is actually ready setTimeout(wtf_flex_handler,1000); } private function wtf_flex_handler():void { trace ("timer complete"); var crop:FlexCrop=new FlexCrop(imageCompo.image, transformManager); } and the imageCompo code : public class ImageComponent extends SkinnableComponent { [SkinPart(required="true")] public var image : Image; //...some basic stuff } Thanks in advance for any input that could help me, I'll give out anything I find if I do find something. proto-crop-greensock.zip
Page 1 of 2
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“I think I love GreenSock as much as bacon.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.