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 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 kn ms en en en en en en en en ms en nb en ms en en en en en en en en en nb en en en en en en en en en fr en en en en en en en en nb en en en en en en en en en en en en en en en en en en en nb en en en ru 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 en en nb en en en en zh ru en sv it en en en en en en ru nb nb en ru nb en en en en en en en en en nb en en en en en en en ja en en en en en en en en en en nb en en en en en en en en en nl en nb en nl en en en en es en en en en en en en en en en en en ceb en nb en ceb en ru en en en en en en en en es nb en en es en en en en en en en en nb en en en sv en en en en en en en en en nb en en en en en en fr en en en en en en it nb en en it en zh nb uk en pl en en en en en en fr en nb en fr en en en en en en en en en en en fi en nb en fi en en en en en en en en en en es nl nb en es nl en en en en en sv en en en en en en en en en en en de en hu en nl en de en en en fr 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
Need help to animate a analog clock
noineter posted a topic in GSAP
help Stagger issue, 2 elements animating without delay
olhapi posted a topic in GSAP
As you can see I have 3 elements with the same class. At the start of animation 2 of them starting instantaneously and only third one after a desired delay. How to fix that?
dorijacobson posted a topic in GSAP
Hi everyone, I'm having some issues with my project for school and I'm hoping someone can help...my animation essentially has four elements: a globe, a dashed line surrounding the globe, a plane that is placed on the dashed line and three clouds. I placed the three clouds in a TweenMax that is separate from the master timeline and they are doing what they need to be doing. The plane is supposed to rotate on the dashed line counter clockwise and that's working fine as well. The globe is supposed to be still and the dashed line is supposed to be rotating clockwise while the plane rotates counter clockwise...this is the part that doesn't seem to be working correctly. Every so often, the animation will completely change in front of me without me even refreshing it– it will either just have the plane, the dashed line and the globe visible (not the clouds) and they'll all be doing what they need to be doing OR it will have everything visible but the dashed line won't rotate. Does anyone know what could be the issue? I appreciate your help!
Google DoubleClick Custom Dynamic Banners
Bradley Lancaster posted a topic in Banner Animation
Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
how to use the documentation to make animation like its
lucrampro posted a topic in Banner Animation
Hi all, I would like to know how to get this result, or do I have to look in the documentation to make animations like this developer ? http://eric-huguenin.com/ tanks you verry much :)
onPressed or onclick Stopping a carousel swipe position .
thaka posted a topic in GSAP
Hello friends; First of all my English is bad, so I apologize. I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link: http://codepen.io/bdang/pen/pJyYEO My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by Tweenmax.to (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active? Thank you.
timelinemax Advice appreciated - 'RangeError: Maximum call stack size exceeded'
mikefraser posted a topic in GSAP
Hi, I'm not sure if this is related to the topic: https://greensock.com/forums/topic/15728-onstart-maximum-call-stack-size-exceeded-error/ I'm trying to build a fairly complex (I think?) multi-stage animation, and I've started getting the following error messages: TweenMax.min.js:16 Uncaught RangeError: Maximum call stack size exceeded at d.h.add.h.insert (TweenMax.min.js:16) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) TweenMax.min.js:1 Uncaught RangeError: Maximum call stack size exceeded at d.k.totalDuration (TweenMax.min.js:1) at d.q.duration (TweenMax.min.js:14) at d.q._remove (TweenMax.min.js:14) at d.h.add.h.insert (TweenMax.min.js:17) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) at d.k.totalDuration (TweenMax.min.js:14) at d.q.duration (TweenMax.min.js:14) at d.q.add (TweenMax.min.js:14) at d.q.totalDuration (TweenMax.min.js:14) Presumably related, I can't get the latest stage I'm working on to begin. I guess as a newbie, I've a couple of questions for the more experienced Greensock users out there: Any idea what's going wrong here? Any thoughts on how I could be doing this better? I've cobbled together my current approach from forum answers / stackexchange etc, currently by using one main timeline and adding sub-timelines (via functions) at various label points. I don't need it to stop in as many places as I've added (thats mainly to help me approach it in sections), but I do need it to hold in the 'working' loop until restarted by controls elsewhere. Any help / thoughts greatly appreciated. Thanks!
Add acction to a video
pati posted a topic in GSAP
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?
Percentage animation based on parent width
pati posted a topic in GSAP
Hi, I am creating a responsive animation where there's an image on the background and some elements of it are animated. For example, I would like to move a cloud 20% of the screen width, but with the code that I have, it's moving it but of a 20% of the cloud width. Does anyone know how to do it of the screen width instead of the cloud width? This is my code: TweenMax.to('#cloud', 5, { x:"20%", ease:Power1.easeInOut, yoyo: true, repeat:-1 });
hacu95 posted a topic in GSAP
Im trying to animate the Fill/Stroke of my SVG but its not animating it just snaps in no matter what
GSAP Infinite loop and React Performance Help
Hamatek posted a topic in GSAP
Hello, First thanks for this nice library and fine the documentation you produced. I am working on a 2D SVG game built with react.js. Why react? Because its something I have already used and know and also because react.js is the hot lib nowadays... Turn out that I needed a solution to animate my SVG, I first tried plain CSS animation but the result weren't the same in different browser or platforms so I spent some time to look for a more robust solution and I end up going for GSAP. I quickly found out that GSAP and React aren't the best friend but things could be worked out, after reading forum I tried react-gsap-enhancer but well It didn't solve my issues. One of my goals was to have some SVG element animation in a loop inside different components and containers all getting their props from redux store. What happened is that loop were working fine at first but at some point after some rendering due to game activity loop animation stopped definitely... , I solved some of those issues by creating a react component (not stateless) for each svg I wanted to animate, using ref callback to get the element and starting the animation when componentDidMount() and preventing the component the rerender using shouldComponentUpdate(){return false} in order to prevent react from rerendering the component on every tick of a timer for example. So I thought I found a solution, I got my simple animation loop going in background only tweening 1 or 2 attribute like scale, a total of 5+ animation loop. Thats when I started to realized that the app got slower and checking the CPU usage it was at best around 140 just in idle mode (only open the web page), i removed all loop and it was back to 0 in idle mode. Thus here I come asking for help..., I do need animations for the game... I was about to go premium so I could add even more animation like particles and text animation... but now I do not know what I can do to prevent animation from killing players CPU also the game main target will be mobile phone... Is there anyway to hire a GSAP expert to look into those issues ? (please note its an indie game not so much $) Has anyone managed to make react and GSAP play well together to animate a bit more than just a svg rectangle or circle... but complex SVG with hundreds of paths ?
Performance issues on mobile (Android)
Ard posted a topic in GSAP
Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/
gtdesign posted a topic in GSAP
I created the following animation using css/javascript, but was told that it would be easier to achieve what I need done with Greensock. http://codepen.io/gtdesign/pen/JKGmeO I would like help in seeing if there is a way to hover over one of the circles, say for instance “Gutters” that the rotation stops and the “Gutters” circle gets larger and changes color. Can all of this be done using GSAP? Thanks for any help, Andy
Slide Transition (Sweep Screen from Right to Left)
xdsantana posted a topic in Banner Animation
Hello Everyone! I encountered a problem for which I can not find a solution. I would like to make the transition from one slide to another, something very similar to CSS clip. The problem is that I need a diagonal bar to sweep the screen from right to the left, showing the content that lies beneath. Does anyone have any idea on how to achieve that? I have attached a picture that might explain a little bit better what I am trying to do. Any help is very much appreciated!
My animation stop working when I step into another window
davidCo posted a topic in GSAP
Hello, i'm new to GSAP please help, i'm trying to do this simple animation It works, but when I step into another window linked with same animation It stop working, doesn't start. (pd my english isn't good enough)       .kt1{fill:#FFF;scale:0; opacity:0;} .kt2{fill:#FFF}
Help with beginner tweenLite user
sick911 posted a topic in GSAP
Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?
Setting top/left for next '.to' in prior '.call' in TimelineLite
ezgl33 posted a topic in GSAP
I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below). When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'. I have also tried using window.foo to set the variables which also did not work. Any ideas on how to get this to work? var problemtl = new TimelineLite(); problemtl.to(step1, 1, {alpha:1}) .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5') .call(function(){finalleft = 500; finaltop = 100}) .to(step2, 1, {alpha:1}, '+=0.5') .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');
How to link the animation of time counter and dragged item?
Arthematix posted a topic in GSAP
Hi guys! Need your help! I need to connect the "Knob" and animation of numbers in Adobe Edge Animate, I did the dragged knob, and don't know how to do the rest ... Knob like this one greensock.com/draggable Change numbers with dragging like this greensock.com/timelinelite Add some scrins and Edge Animate files in attach files to better explain what I mean Thanks in advance for any help! Regards Misha. dc_power_supply_animate.zip
Flickering Div Content/onRelease not moving object till cursor moves
soubkia posted a topic in GSAP
I just started using these libraries today but I hit a bit of a roadblock. I am aware that my pen is awkwardly mixing css transforms and greensock tweens however even when all css transforms are commented this problem persists. The content on the back of the card flickers when rotating to match its fanning angle during the animation. The center one, which has no rotation, does not flicker at all. However the others do. Also strange is that the front of the card does not experience this at all. Additionally I noticed that onRelease does not seem to move the object back to the original location until after a mouse move event has occurred. this means my mouseout animations will not trigger if you drag the card and then do not move the mouse. Any ideas on work arounds to these problems? The red line is just the area where the drag event should be forced to end and the blue line is the hand area. I sorry for the messy scss, I was trying to move over to greensock however now that this is broken Im not sure what to do. http://codepen.io/AdilSoubki/pen/dPwPRP
help, a bit lost
Jun posted a topic in GSAP (Flash)
hey everyone I m really interested in these tools, and oh i m totally new to everything... question, how do I install these into my wordpress site... anyone can help with a setup instruction. i typically want to use the scroll parallax functions, have a business package no idea where to start. my brain needs an dummy Actionscript i guess.....help thanks for your time
How to assign a label to a sequence which is already relative to another label
richbai90 posted a topic in GSAP
Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?
TranslateZ sends image flying off the page
richbai90 posted a topic in GSAP
I'm using the greensock animation library to animate the translateZ property of an image. This is my code: $(" ") .attr({ src: piece, class: "pieces" }) .hover(function() { tl.to($(this), 1, {transform:"translateZ(1px)"})}, function() { tl.fromTo($(this), 1, {transform: "translateZ(0px)"}) }) .load(function () { _stageElement.append($(this)); }) } But instead of stopping at 5px it flies completely off the screen. Does anyone know what's happening here and why? Also if it's important after the image flies off the screen, it comes back to its original location, but the hover property doesn't have any effect anymore. I'm not sure if this is a greensock issue or a jquery issue. Here's an example to see what I mean http://richbaird.net/3dFlip/fip.html
Problem in Chrome and Safari browsers.
krawczuk posted a topic in GSAP
I made a transition animation in a few boxes in my site and it's making my texts remain in effect blur and blur. Can anyone help me? This is the site: www.krawczuk.com.br / koletivo-creative. Thank you!
SlowMo Ease - AS2
dev-kp posted a topic in GSAP (Flash)
Have been trying to replicate the slowMo easing in AS2 by using the Custom Easing but no luck luck yet. I managed to get the custom ease to come in quickly pause for a bit and then move out normally. I am trying to make it move out quickly like slowMo in as3. Any help will be very appreciated. Thx P. ps posted this in the wrong place can't figure out how to move it.
Can someone kindly assist me with why my code wont work.
miccodan posted a topic in GSAP
tween-test                      body { background-image:url('images/bg_main.jpg'); }      C   O   T   Y      $(function(){ var testing; testing = $("#test-1"); TweenMax.from(testing, 4,{css:{ top:"-300px" }}); });       I am VERY new, so it is probably something really basic, but I can not figure it out for the life of me. Thanks in advance.
Page 1 of 2
“Honestly think without TweenMax, I'd of changed careers by now; it's that good.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“I think I love GreenSock as much as bacon.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“...obviously GSAP is incredible”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
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.