Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'image'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you. https://dribbble.com/shots/6749793-Supreme-Landing-Load-States
  2. I’m trying to reproduce an effect i saw on this website : https://stuart.com/delivery-express-courier/ Just after the section with this title : Eco-friendly courier service, go green with us You can see the result on the temp website: https://swoopin.webflow.io/ There is 3 sections, and on the scroll, the image on the left stay fixed then fade to each other, while the text on the right continue to scroll normally I started workin on it, i got essential but it's buggy How could i fix that ? <script> gsap.to('#IMAGE-ELEMENT', {
  3. Hi everyone, I would like to achieve the following image parallax effect (vertical translation) with Scrolltrigger and without Smooth Scroll. https://tympanus.net/Tutorials/SmoothScrollAnimations/ I tried the parallax demos in the docs, but they work differently then this example. Which way is the best to get this effect? Thanks Martin
  4. Hello guys, I've recently started learning GSAP and I'm really glad that there is such nice community here! So I've been trying to replicate this effect as seen here: https://www.castoretpollux.com/agence. Specifically the effect of hovering the text with image reveal. I need pretty much the same effect, but I wasn't able to recreate it. Any help and suggestions are welcome! Thanks in advance!
  5. I'm trying to make this animation https://codepen.io/kozach/pen/XWmYPLg, but without loss of image quality. To achieve this i create 5 images, each resolution is 40% more than viewport resolution and accordingly each image is scaled by no more than 40%, after which the image changes and the scaling is repeated. Here my solution: https://codepen.io/kozach/pen/pojVdvx But I can’t synchronize the movement of text with the image to get the same result as in the example. Can someone tell me what could be the problem and how to fix it? Or maybe there is another way to ac
  6. Hey guys, I want to add On scroll image revealing animation on my website. Check out the link below to see the image revealing animation which I want to add in my website but I can’t seem to find any helpful example or library on the internet so I could do it myself. It would be great if you guys could help me to do this animations with GSAP because i'm new to GSAP. Here is the Link: http://renvoye.com/case-mixpanel Best Regards, Umer Zaman
  7. 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 <image> 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
  8. 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?
  9. 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
  10. 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?
  11. 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: <div id="gradient mask"> <div id="myimage"></div> </div> CSS: #myimage { background-image: url(image.jpg); width: 259px; height: 194px; }
  12. 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 i
  13. 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
  14. 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 n
  15. 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!
  16. 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!
  17. 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!
  18. 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
  19. 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
  20. 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.
  21. 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.
  22. 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 <div>; the first image is visible immediately; the rest are styled as visibility:hidden. What's the best algorithm for doing this usin
  23. 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,
  24. 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
  25. 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