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
  • 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. Hey Tweeners, I was wondering is it possible to create typing effect for placeholder text without using "SplitText"? If yes how to set textarea placeholder as target in tweenmax function. I have tried but it's showing null target. Anyone can explain why?
  2. Hi everyone, Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. Any ideas what I'm doing wrong? Thanks
  3. Hello all, I am newbie and just started to learn GSAP technology in my company. I have asked to create this effect using GSAP. I tried my best to find scrollTop of current message and fail to apply autoAlpha on it. Will you just check both images and can someone tell me how can I create fadein and fadeout effect scrolling up and down. I want to show current message with opacity 1 and last message with 0.5 and last second message 0.25 and so on. And when I scroll down messages opacity should change as per scroll. Please need someone early help to achieve this. Thanks in advance.
  4. Hi all, My issue here is a bit two-fold. I've been making steady progress on this project, but I've hit another wall. The first issue is that since I've added my Timeline for the second animation, the animation opens immediately on browser load. The second issue is that my Timeline doesn't seem to be running the .fromTo() I've defined for it. So what I'm attempting here is to define the first animation, define the second animation, toggle the first with click, toggle the second with timeline onComplete of the first animation, and then to be able
  5. Hi all, I need to reverse my div's animation to its original state on the click of the link. I've been reading that TimelineMax is the only way to do this? Will they work together in this context/is there a way to do this with just TweenMax/am I stuck in the woods? The reverse() function in TweenMax doesn't seem to really do anything besides stopping the animation from working altogether. I've tried using TweenMax.to in a separate instance that selects my .link class for the addEventListener( 'click', animate); to return the div to its former properties but
  6. Hi all, So I am attempting to make it so my child grows into its parent. I have my wrapper div's margins set to 5vw so that I have a perfect border all around my browser. The issue seems to be when I click the div and the animation starts, it ignores the margins set there and expands past the wrapper's containment field. What am I not seeing? Thanks in advance!
  7. Hi all, I try to have a perspective effect on my title "Master Roaster", I separate all the letter (all of them are in a different <span>), but my animation doesn't work on that, it's work on my head-text ("01. Redesign"). I can't find the problem... Anyone could help me ? Thanks a lot
  8. I need to scroll animation when the user scrolls the mouse wheel.Now animation is working on page load. I need content should animate on the scroll. First two articles is working but when I scroll it than animation is not working. I tried some code but not working. would you help me out in this? https://jsfiddle.net/Narendra2015/0gL8k79a/
  9. Hello, I would like to know if we can create a retro game using GSAP? Is it really possible for beginners to create their own basic game using GSAP? Even without physics in the game just to control the character only. Or even control a snake in the snake game. Anyone tried to create a game using GSAP? Can you please share it?
  10. I am trying to improve my CSS animation skills by recreating concepts I find on dribble but this one is giving me a hard time: https://cdn.dribbble.com/users/73241/screenshots/3543071/attachments/787158/att_split_00.gif I am unable to figure out how to recreate the sound visualizer's effect. I am able to setup a normal sound visualizer with bars for the frequencies but I am unsure how to approach the special effect or know if it's even possible. I have been using "shooting fountain" as a reference for it's animation but surely I have it's terminology/description wrong. Curre
  11. I'm very new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this gold bar across the screen (and fade it in/out) in three tweens. However, between each tween in the timeline is a distinct pause for a quick moment before the next tween begins. I tried firing the tweens before the others finished, but that seemed to break the animation when it repeated. How do I make this animation one continuous motion and allow it to be repeated indefinitely? Here is my js right now: va
  12. Hi, I want to know how to clear all the animated properties from TimelineMax at once. not individual. like onComplete clearProp all or something like that and all the nested elements also. is there a way to use wildcard selector? ex: var tl = new TimelineMax({id:"sliderOut", autoRemoveChildren:true, onComplete:function(){ // i want to clear all the animated values and properties at once not individual }}); tl .staggerTo($nameSplit.chars, 0.4, {y:'-10', autoAlpha:0, ease:Power4.easeInOut},0.05,"+=0") .staggerTo($descSplit.words, 0.4, {y:'-10',
  13. Hi all, once again apologies for the lack of Codepen link, it keeps complaining that I am spam when I try to fork, even though I am not even logged in. Anyways, I have made a JSFiddle instead. I am hoping my issue is pretty simple, not even sure it is related to GSAP. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place. I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section
  14. Hi forum! How are you today? I'm working on an animation that I want to trigger and sync to the scrollbar, but start in the middle of the page, and return the scrolling the page when finished. This is what I thought about doing: [content] [ANIMATION PLACEHOLDER which is height: 100vh;] [empty section] [ANIMATION which is floating and set to display: none; and height: 100vh;] I put a scroll scene trigger at the start of the ANIMATION PLACEHOLDER section. the animation duration is set by javascript. the duration will change the ANIMATION PLA
  15. hi is anyone one know how to animate text on a curve path, i've attached a snap shot. can you please advice me to get this thing done.
  16. Hey guys, i was lookin on the forum and on the internet to finds something about a show/reveal text animation. I want to draw a line in html and out of that line the text is revealed. almost like you lift a curtain and the text is revealed. Looks very simulair like this. i tried to wrap a text element inside of a div with an overflow and then with gsap lift the div wich will reveal the text behind it. Didnt get that to work unfortunately since the elements both move when i try it. Any suggestions on how to achieve this?
  17. HI everyone, really happy to get a job animating HTML5 banners using GSAP. Making and animating the banners are not the problem, i am having a problem getting them loaded into sizmek. I followed some documentation and registered click events but the agency i have to send them to says they won't work. Does any one have a blank biolerplate i can load my project into with sizmek built into it. The static banner template from sizmek set they gave me keeps throwing errors it's just a simple one size banner that needs a to be fully clickable. Any help would be appreciated.
  18. Hello! I want to make cyclic animation I use TweenMax.staggerFromTo. For this purpose I want to restart function with animation. How to me to make it? onCompleteAll does not work. It is started constantly during animation, but not at the end. Forgive for my English.
  19. hi! In the code pen you see an animation for the menu. I use the splittext plugin as you can see. First time you open the menu, everything animates as intended. But after closing once, the second time it seems like it's ignoring the timeline. Been fiddling with it for a long time but can't seem to figure it out. Anyone has a hunch of what's going wrong?
  20. Hello! I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock. Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock. Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.
  21. Hi, The library is great. Loves to use it to create animations. I was using it will scrollMagic library. I wanted to know if there is any way I can detect if the animated element is scrolled out of the browser viewport when the user scrolls the page up so that the animation can be reset. Right now when it is scrolled down the animation is playing in the reverse direction. I just want the animated element stays in its final state as long as it is in the screen and when the user scrolls up and the element goes out of the viewport I want to reset it so it can play again when it is scroll
  22. I'm new to greensock, and I realy like it sofar. Here is my problem. I have 2 div.product's and inside are 2 children, one needs to animate to the lef and one needs to animate to the right. I want this to happen for every .product div , but in sequence. Right now the animation starts with both the .left divs, and after that the .right divs start to animate. Is it possible to index the .product divs? and iterate over each one, no matter how many .products div there are? I would like to stagger them in sequence but I can't figure it out and I hope I'm explaining
  23. Hey guys, I have been struggling to achieve some ( i guess ) basic gsap stuff. What i want to achieve is a text that comes in from out of the screen to the center of the screen and then stays there for a couple of seconds and then moves out of the screen again. Now it is time for a new text that comes in from the left goes to the same position and moves out of the screen again. I tried to achieve this but the problem that i've encountered what that the 3 text items where overlapping eachother at the start. the other 2 text items need to be invisible when the 1st one moves t
  24. Hello! It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right. Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size. I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get upda