Jump to content

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

Search the Community

Showing results for tags 'animation'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I've been using this for a while, it's not perfect but the idea behind it I guess is to generate multiple banners with minimal effort plus a presentable preview link, with backup images. https://github.com/bastole/dc-richmedia-automation-template If anyone can review or comment on what can be done for improvementr, it'd be great! cheers
  2. Hello... I'm new to Green Sock and have some difficulties in a project. I found an interesting example, which i want to insert in a website that i am working on. The example is html and css and i want to make it animate with a tween or timeline. Can someone help me? Thank you in advance. I've put the codepen example and a file with whole code. Can you help to make the animation in example to run in reverse , i would like it to start with the parts of the image scattered and in the end combine them all together to the final image. Sorry if i didn't make my self clear. Code.txt
  3. We are an emerging company in the healthcare space looking for a developer with experience in landing page development that is expected to last 1-2 weeks. Must be experienced with Javascript/Jquery, Greensock (other animation libraries), responsive design, and css3 transitions. We are open to location, but would prefer someone in the United States. We have specifications available for applicants to review upon request. If you have any questions or are interested in the role please reply below or at jermaine@care-advisors.com. Cheers, J
  4. Hi guys - To create a tween that animates as you scroll what do you need exactly? I am referencing both tweenmax and scrollmagic and I also added the gsap animation plugin. No matter what I do this doesn't seem to want to work. Please help!
  5. Hi everyone! This is my first time using GSAP, and as a learning experience, I'm trying to create a clone of the Twitter heart animation, seen here. I've came to a stumbling block, however, when it comes to step 6 on the above link (the hollowed-out circle). My initial plan was to simply create an SVG with a transparent fill-colour and then animate the width of the circle, but stroke-widths aren't animatable in GSAP (and it appears anywhere), so does anyone have any suggestions of how to create this step? The centre of the circle needs to be transparent, so the "hacks" that have came to mind so far won't suffice. For example, creating two circles, with a smaller white one on top of a larger one to fake the hollowed-out centre (if that makes sense?). That won't work because the SVG will need to be transparent to fit on photos, for example. Does anyone have any ideas of how to solve this problem? Thanks!
  6. Hi, I created a project using GSAP TimelineMax Plugin where the text on the left side slides in the original position from the left (kind of like fade in). var timeline = new TimelineMax(); timeline.from(".main-text-home-cta h2", 1, {x:-100, opacity:0},0) .from(".main-text-home-cta h4", 1, {x:-100, opacity:0},0) .from(".buttons-under-nested-rows", 1, {x:-100, opacity:0},0) .from(".devices-chat-picture", 1, {x:100, opacity:0}); The code above the code i used and added near the </body> tag and the TimelineMax and TweenMax JS files above the code. The problem i am facing is that when the page loads the text appears on the screen in its original position (the position it will after the animation completes) for few seconds (or till the time the page is loading) without animation and as soon as the page load is completed the animation starts. So I want to know whether this a problem with GSAP Plugin or I am doing something wrong. And also I want to know how to fix this so that while the page load nothinng will be shown in the view and after the page loads the animation will start. One more problem that I faced is that when the animation starts after the page load it is very slow and laggy (again I don't kow whose problem is this). Thanks.
  7. Hi, Each time I click on the button, I add a new (.box) in the list but I want to smooth the position of the others boxes (see my codepen) and still get the content vertically centered. As you can see I used flexbox. Thanks for the reply.
  8. Hi, I'm using SVG to create buttons in a different shape rather than the usual rectangular button. The problem is (at least the one that I'm working at the moment) is that the animation, whilst it works as intended, doesn't seem to run at the same rate across different browsers. Firefox, Edge and IE 11 run fine, as I like it to, Chrome and Opera on the other hand have a weird slowdown look to it. Unfortunately, whilst I can use the :hover selector on the elements and do it that way, which grants me consistency, in order to have it so the hovered button stays on top of the rest I have to re-order the SVG elements to have it on the bottom, doing so seems to interrupt the :hover transition in some way on Firefox, Edge and IE 11 but works fine on Chrome and Opera. There may be an error in how I've set it up in general, but it appears to be good enough. Any help will be appreciated Thanks
  9. Hi, I have been using Google Web Designer for a while, I hate it. It's clunky and to do simple animations takes for too long. I would rather just use GS. I am looking for some advice or even a sample file to show what chunks of code we need from google to make a hand-coded banner work with google (the click tag etc). As GWD does this and their documentation is AWFUL some pointers would be appreciated. It will take some convincing the other people in the ad team but I think if we setup a template and got it through QA it would be a much better way to go. Many thanks.
  10. Hi guys, First let me clear one thing, I have no idea about GreenSock and what I am going to ask might be sound stupid so forgive me. I have created one horizontal scroll slider (check my Codepen link) and 30 navigation dots. So what I want to exactly do is when I start scrolling the paragraph container from left to right, that should change the size of above navigation dots. Suppose, if I scroll little bit 1st dot should biggest, 2nd dot little bit big and 3rd one also little bit big and other 27 dots stay small as it is. Again, if I start scrolling from the previous position 1st dot should be little bit small, 2nd one biggest and 3rd same as 1 little bit big, and other 27 dots stay small as it is. Again, if I scroll again where I left scrollbar 1st dot and last 26 dots stay small as it is, 2nd should be little bit small and 3rd one should be biggest and 4th little bit small. This process should continue until scroll bar reach to right side. And same thing happen with reverse order too means when I start scrolling from right to left animation on dots size should applied reverse side. So I hope you guys understand what animation effect I have to show ? If you any question please let me know. I hope to get answer from you genius. Thank you.
  11. Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.
  12. I have a multi-stage menu animation that I've been tinkering on for a while now. I have finally got it to work, but it only works once all the way through and then it breaks when you try to revisit the menu a second time. For the first part, the chopsticks grab the fish on hover. If you leave the sushi menu without clicking, the animation reverses. The second part happens on click. The fish is consumed as the menu expands and the chopsticks cross to form the closing button. The third part is a second click that closes the menu and reverts the sushi menu to the initial position WITHOUT reversing the previous animation completely. Again, it works for the first go, but anytime after, it doesn't perform the second and third parts and the first part gets wonky. I created a Codepen, but it didn't seem to want to work there like it does live. You can see the entire site and my menu animation at http://sushi503.com. I have tried doing a single timeline, a master timeline with child timelines and finally separate timelines, which has been the most successful. Thanks in advance!!
  13. Please check the codepen link and could someone please help me to create "Tada" or "Flash" effect instead of "Shake" effect? Thanks in advance.
  14. this.tl .to(alpha, 1, {x: 100, ease: Circ.easeInOut}) .to(beta, 1, {x: -100, ease: Circ.easeInOut}, 0) Hi, I'm wondering if its possible to exclude the second animation only when reversing the timeline. tl.play() should play both of them. but when tl.reverse() it should only play the animation on the "alpha" element.
  15. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?
  16. Hello, my animation on iphone is so blur. I use svg on all elements, so there is no way blur. When I animate svg inside a div, it looks blur. When the GSAP timeline ends, everything looks fine. So it is blur during animation. I test on iphone safari and chrome, it is blur. But android looks fine! Here is my source code, if you open it with mobile, it will load mobile code, otherwise it will load desktop code. So there is two version https://github.com/rockmandash/InteractiveInfographic2 Here is the website: https://rockmandash.github.io/InteractiveInfographic2/ I tried these code, but not helping. body { filter: none !important; -webkit-filter: blur(0px) !important; -moz-filter: blur(0px) !important; -ms-filter: blur(0px) !important; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0') !important; } Here is the testing video!! Please take a look what happened. https://youtu.be/_8GOauh1Ko0 Many many thanks on this awesome community!!!!
  17. I'm trying to create two separate animations on the same element. What I'd like it to do: Fall in from the top of the screen...Then after that animation is completed, I want the same element to play another animation, but loop it and never repeat the first animation. Here is what I thought I could do. TweenMax.from(".section1-circle1", 1.0, { ease: Bounce.easeOut, y: -822}, "+=0.5", {repeat: -1, yoyo:true, y: 15}); Any help would be nice.
  18. Hello there, Just simply trying to add a background-color or Fill to an SVG.. Wondering why it's not working. var tween2 = TweenMax.from('.st0', 0.5, { fill: #000000 }); Cheers,
  19. Hi Everyone! I am very new to greensock but love it already! I am currently doing an animation that has footprints walking and I am trying to overlap it so that I see at least two footprints at once and the first fading out as the third comes in. Where I am so far: .from($rightfoot, 0.5, {top:241,autoAlpha:0,}) .to($rightfoot, 0.5, {top:241,autoAlpha:1,}) .to($rightfoot, 0.5, {top:241,autoAlpha:0,}) .from($leftfoot, 0.5, {top:216,autoAlpha:0,}, "-=1") .to($leftfoot, 0.5, {top:216,autoAlpha:1,}) .to($leftfoot, 0.5, {top:216,autoAlpha:0,}) .to($rightfoot, 0.5, {top:227,left:123,rotation:62,autoAlpha:0,}, "-=0.65") //2 .to($rightfoot, 0.5, {top:227,left:123,autoAlpha:1,}) .to($rightfoot, 0.5, {top:227,left:123,autoAlpha:0,}) .to($leftfoot, 0.5, {top:200,left:127,rotation:62,autoAlpha:0,}, "-=0.65") .to($leftfoot, 0.5, {top:200,left:127,autoAlpha:1,}) .to($leftfoot, 0.5, {top:200,left:127,autoAlpha:0,}) .to($rightfoot, 0.5, {top:207,left:159,rotation:47,autoAlpha:0,}, "-=0.65") //3 .to($rightfoot, 0.5, {top:207,left:159,autoAlpha:1,}) .to($rightfoot, 0.5, {top:207,left:159,autoAlpha:0,}) .to($leftfoot, 0.5, {top:172,left:162,rotation:40.5,autoAlpha:0,}, "-=0.65") .to($leftfoot, 0.5, {top:172,left:162,autoAlpha:1,}) .to($leftfoot, 0.5, {top:172,left:162,autoAlpha:0,}) .to($rightfoot, 0.5, {top:171,left:192,rotation:31.5,autoAlpha:0,}, "-=0.65") //4 .to($rightfoot, 0.5, {top:171,left:192,autoAlpha:1,}) .to($rightfoot, 0.5, {top:171,left:192,autoAlpha:0,}) .to($leftfoot, 0.5, {top:137,left:186,rotation:14.5,autoAlpha:0,}, "-=0.65") .to($leftfoot, 0.5, {top:137,left:186,autoAlpha:1,}) .to($leftfoot, 0.5, {top:137,left:186,autoAlpha:0,}) .to($rightfoot, 0.5, {top:127,left:209,rotation:9.5,autoAlpha:0,}, "-=0.65") //5 .to($rightfoot, 0.5, {top:127,left:209,autoAlpha:1,}) .to($rightfoot, 0.5, {top:127,left:209,autoAlpha:0,}) .to($leftfoot, 0.5, {top:96.2,left:194,rotation:0,autoAlpha:0,}, "-=0.65") .to($leftfoot, 0.5, {top:96.2,left:194,autoAlpha:1,}) .to($rightfoot, 0.5, {top:96,left:205,rotation:0,autoAlpha:0,}, "-=0.65") //end .to($rightfoot, 0.5, {top:96,left:205,autoAlpha:1,}) Thanks for any help in advance! Jenna
  20. Simple question with perhaps a complicated answer. Is it possible to animate multiple objects towards a central point in GSAP? Rather than adding positioning tweens to each individual object? For example I have a scene with objects around the canvas, I'd like them to slide onto the canvas towards the middle of the canvas.
  21. Hi, I try to move a Google Map marker along a Bezier Curve using TweenMax and its bezier property. However Google Map Marker has only setPosition method to update position. How can I feed the bezier property (see below) ? Thanks for your help var marker = new google.maps.Marker(); var bezier = new TweenMax(marker, 6, { bezier:{ type:"soft", values:???? }, ease:Linear.easeNone} );
  22. Hi! I have seen many tutorials showing tween animation on objects. However, I want to know if it's possible to animate cells of a spritesheet too using GSAP ? Like how it's done in other frameworks. I am doubtful about this, since spritesheet are probably canvas-only feature. So, if not, is their any alternative to animate images in sequence through GSAP ?
  23. In my Codepen is an example of 4 bubbles animating. Each one enters from the bottom and pause in the middle of the page, then leaves upwards. However, I want to be able to achieve this with one animation, so that it doesn't matter how many Bubbles are in the page, it's going to fire them all up one by one just as it is in my example. I had experimented a bit with `staggerTo`, `staggerFrom` and `staggerFromTo` which I understand are intended for this purpose, but I couldn't quite nail the exact desired functionality. Is there a solution for this?
  24. Hi! I have a HTML5 banner advertisement that I'd like to automatically replay the animation on a loop. Is this possible? I have attached the HTML5 banner advertisement source files. Please let me know how to accomplish this. Thank you for your help! 120x600_v2.zip
  25. Hey! I'm wondering if it possible to give an Object a certrain speed. Say it keeps moving 50px per second to the right. TweenMax.to(obj, infiteTime, {speed:50}); Eventually I want my element to reposition itself to the left side of the screen. Once it reaches the right side of the screen. To create a pac-man like effect. (like in old games..Where once you leave the screen on one side you spawn on the other). This way I can create an infinite cycle of clouds for example. Any idea if this is possible or how I would go about this? I tried calculating the distance the object has to travel to reach the end of the screen, but this doesn't give the effect I want. Since it just speeds up or slows down the object to reach it in-time. P.S. English is not my first language, sorry if I made any mistakes. Cheers from the Netherlands Hobie