Search the Community

Hello! I've been making svg animated banner ads, and the client ran into a bit of a snag- there are some artifacts being left behind by the animation on certain computers. It seems to only be in Chrome, but isn't consistent across computers. The client is running the same OS and version of Chrome as I am (Windows 10 / Chrome 55.0.2883.87 m), yet I have no issues. Here is a screenshot of what's showing up underneath the Call-To-Action button (scales in from 0, there is no shadow under the button) and some text (moves up from below the viewbox): This is the transformations I'm applying: t1.fromTo(text2, 0.75, {y:75}, {y:0}); t1.fromTo(cta, 0.4, {autoAlpha: 0, scale: 0, transformOrigin: '50% 50%'}, {autoAlpha: 1, scale: 1, ease: Back.easeOut}); Has anyone else encountered this?

I have a work that requires grouping elements in animation, and then taking it a part and so on... As for now i am creating separate images when images should work together, and then making a transition when they should be separated several images. So when I have several elements, I can wrap them into a div and it can work like group. But what if I have some animation set up, like in codepen, for now to save it I would need to hide the element that I need to move out of animation, create the same one on top of it, animate it, put it back, hide, show previously hidden one - done. Is there a better way? Can I switch of animation for some element, do another thing, and then continue previous animation?

Hello everyone! I am only getting to grips with GSAP and I use it for relatively simple animations and effects. I was working on this website (see the opening heading)- http://www.adbmedical.com Everything works very smoothly on my local machine but on the server there is a delay and the animation plays very choppy. Can anyone tell me how to solve this problem? Many thanks in advance!

Hi, I have animations working on a loop of 2 and then on last loop the last animation should stay on. But this is not happening Basically, the last .from shows the duration and then fades, but I haven't added a .to for it to fade, so then it should stay, no? Can anyone help? Code: function initAnim() { console.log("INIT ANIM"); if (loop < 2) { tl.pause(0, true); } tl.play(); tl.set(truck, {rotation: 51, x: 118, y: 83}) .from(truck, 2, {x:-150, y:250}) .from(line1, 1.5, {autoAlpha:0}, "-=0.5") .to(line1, 0.5, {autoAlpha:0}) .from(line2, 2.15, {autoAlpha:0}) .to(line2, 0.85, {autoAlpha:0},"leave") .to(truck, 0.75, {autoAlpha: 0},"leave") .from([line3, line4, cta], 4, {autoAlpha:0, ease:Power4.easeOut}, "last") .call(loopCheck, ["param1"], this) } function loopCheck() { if (loop >= 2) { console.log("END"); tl.pause(); tl.invalidate(); } else { // tl.to([line3, cta, line4], .4, { autoAlpha: 0, onComplete: initAnim }) initAnim(); } loop++; }

Hi, I have been trying to figure out why all my text is showing for like 1 second and then disappears and the animations start? I am using: tl.set(truck, {rotation: 51, x: 67, y: 110}) .from(truck, 1, {x:-150, y:250}) .from(line1, 0.5, {opacity:0}) .from(line2, 2.15, {opacity:0}) I do realise if this may sound like a really simple question. I have even put each copy text in individual divs and given them opacity 0, but still that doesn't work. I have set and image to slide into the banner (truck), then the copy should appear. But that is not the case. We have all the copy showing overlapping each other, then the truck sliding, then copy hides and starts the animation. Any suggestions?? Thank you

Dear GreenSocks: I created the attached compass and made it spinnable with TweenLite and Draggable. Now I'm stuck: The images on top of the compass need to be clickable (and lead to the same URL) no matter in which position the compass stops after the user rotates it. I have lost hair and sleep over this. Does anybody know if this even possible? (The compass the way it right now is ONE .png image and the little pictures on top are each mapped with coordinates.) Any help would be greatly appreciated. Even if the help is: Not possible with GreenSock. Thank you so much! ~Dagi

I would like to know how can I make an animation appear longer? I want it to EG: var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=1.75") .to($line1, 1.5, {opacity:0},"+=0.25") .from($line2, 1.5, {opacity:0}, "+=1.15") .to($line2, 1, {opacity:0}) .from($line3, 4, {opacity:0}, "go-=0.35") .from($line4, 4, {opacity:0}, "go-=0.35") .from($btn, 4, {opacity:0}, "go-=0.35") i changed 4 to 0.5 but then how do I make it appear longer ? What happens as well, I have the gif image loop 3 and the copy text repeat 2. On the last repeat the copy seems to overlap the image. Can anyone help?

Is there any posibility or plugins to make animation with user interface and not coding? For example on this page http://greensock.com/position-parameter i would like to move green timelineUI-tween on the timelines, to replace tweens among themselves. Is it possible? My goal is to replace After effects, because my task is to create easy animation for children, and in after effects even easy things takes hours.

Hi, I figured how to do it, But I Cannot understand the real logic behind it. if I ask a centered div to move X by 250px, then the next animation one by the same distance. they should end up a 500px ... with equal mouvement right ? .. I've made a simple codepen. I need to understand, even things this simple !

Hi, I have just started working the Tweens here, so please if you can help me on probably a simple thing for some. I would like to: 1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation). 2. When clicking anywhere on the banner to be taken to the external link, the video stops. 3. The video stops after playing for example, 10 seconds. Can this be done? I have been trying and looking into it and unable to combine my animation and Youtube video together.

Hello .. To anyone that needs to pause() and resume() your GSAP animations when switching browser tabs or windows and have them stay in sync. I did more tests and found that Firefox and Chrome where sometimes not firing the event focus and blur, when you left the active tab. So i found a better way that is consistent, to check if the current active tab has focus or not, using the HTML5 Visibility API. // main visibility API function // use visibility API to check if current tab is active or not var vis = (function(){ var stateKey, eventKey, keys = { hidden: "visibilitychange", webkitHidden: "webkitvisibilitychange", mozHidden: "mozvisibilitychange", msHidden: "msvisibilitychange" }; for (stateKey in keys) { if (stateKey in document) { eventKey = keys[stateKey]; break; } } return function(c) { if (c) document.addEventListener(eventKey, c); return !document[stateKey]; } })(); Use the HTML5 Visibility API like this: // check if current tab is active or not vis(function(){ if(vis()){ // tween resume() code goes here setTimeout(function(){ console.log("tab is visible - has focus"); },300); } else { // tween pause() code goes here console.log("tab is invisible - has blur"); } }); You will still need the following to check if other windows have focus or not (blur). Chromium type browser like Google Chrome or Latest Opera do not fire all the time when binding the event with jQuery window, so you need to check for window.addEventListener. // check if browser window has focus var notIE = (document.documentMode === undefined), isChromium = window.chrome; if (notIE && !isChromium) { // checks for Firefox and other NON IE Chrome versions $(window).on("focusin", function () { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }).on("focusout", function () { // tween pause() code goes here console.log("blur"); }); } else { // checks for IE and Chromium versions if (window.addEventListener) { // bind focus event window.addEventListener("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }, false); // bind blur event window.addEventListener("blur", function (event) { // tween pause() code goes here console.log("blur"); }, false); } else { // bind focus event window.attachEvent("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }); // bind focus event window.attachEvent("blur", function (event) { // tween pause() code goes here console.log("blur"); }); } } You will also notice that i have a setTimeout() in the focus event handler so the tab/window has enough time to gain focus, and so the focus event handler fire consistently. I noticed Firefox and Google Chrome were not resuming correctly unless i added the setTimeout(). The reason i use the HTML5 Visibility API is because some browsers like Chrome wont trigger the tab blur unless you actually click inside the other new tab, simply scrolling with the mouse wont trigger the event, I hope this helps anyone who needs to pause() and resume() their animation so they don't get out of sync. **UPDATE** FULL PAGE mode: http://codepen.io/jonathan/full/sxgJl EDIT mode: http://codepen.io/jonathan/pen/sxgJl To Test, try: First clicking inside the Preview panel so the page gains focus (important) Switching between tabs Giving another program focus and come back to the browser See below post for more info Also.. I made it into a jQuery plugin called TabWindowVisibilityManager so you only have to define your pause() and resume() code once inside the FOCUS and BLUR callbacks. See the bottom post. TabWindowVisibilityManager.zip

I have a project that requires a transitional effect. I need to code ooze expanding from the top of the screen to the bottom, creating a complete wipe. The arcs/drips need to move as realistic as possible resembling a fluid sliding down your screen. This is the closest I could find to the effect I need to create. http://codepen.io/rkgttr/pen/doLKGO Except for it is just one oozing line instead of the loop, and it needs to reach the bottom instead of fading out. So here is my problem. I need to do this with GSAP and I don't know how to create those curves. I want to be able to control the arcs opposed to just using an image, to make it look like some kind of liquid. I thought about creating a cluster of dots and just animating their shadows but that wouldn't work with the concave parts. Is there a way to draw something on a bezier curve and control it? If yes how do I do that? Or do I need to work with co sin to make sine waves? https://jsfiddle.net/umaar/fWSUk/ Do I need to whip out the quadratic formula to achieve this look? I am a front-end coder and this is a whole new level of brain power for me. I might be overthinking this. Thanks for any help.

Hi all, I am new here and testing greensock for HTML5 banner animation. I have created 4 different box und and 1 text images. I have following Problem: One of my box image does not appear. image 4 The zooming effect in IE is not functioning smoothly. The Stage area is at present 600px width and height. If I increase minimum height from 600 to 1200 and try to fit the images than my whole box and other images are looking very tricky. http://codepen.io/gsmas/pen/bwJLvK Thanks in advance

Hello, We've been scratching our heads on the following problem for a few days now and wonder if someone can help. We have a series of elements (dots in this case) and attempting to create a sort of fisheye effect where the dots at a certain point in the screen get larger. I've created the following Codepen, that shows the type of effect we are trying to achieve. (Though the grouping needs tightening up) https://codepen.io/Seanom/pen/qaKBXX I toyed with the duration but found that if the user scrolls too fast then events are skipped. I really like the animation effect on the above pen but it has been pointed out that we don't know the height of these pages so in theory adding 5000+ dom elements to a page and then animating them all using scroll magic and GSAP could be a performance issue. We have started to move this over to canvas as think that may handle the redraw events in a more effective way. This is very much a work in progress but shows where I am up to at the moment. I have attempted to call a tweenmax.to and animate the dots as they are redrawn but the animation occurs once per page load. https://codepen.io/Seanom/pen/YGvzgO?editors=1010 Is it possible to have the animation trigger each time the canvas redraws the dots. Hopefully that makes some sense, if it does can anyone help or point me towards some useful material. Thanks in advance Sean I've gone over the following threads, but have not been able to apply anything I could get to work http://greensock.com/forums/topic/7393-how-do-i-reset-a-tween/ http://greensock.com/forums/topic/11740-advice-on-scrollmagic-timelinemax-collisiondetection/ http://greensock.com/forums/topic/7996-engine-update-frequency/ http://greensock.com/forums/topic/7786-how-can-i-hijack-requestanimationframe/

Hi Many thanks to the moderators for their help with GSAP I need to be able to make moving animations blink or pulse. I have been able to do this using several tweens that move, blink and then restart, move and blink etc but this is choppy and not very elegant. I am sure there is a simpler way to do this but I don't know what it is. I wondered if there was a solution with the onRepeat function? I have created a codepen where I have a block moving and blinking over the complete duration of its path but I want to be able to control it's opacity in more detail. http://codepen.io/anon/pen/RGgJrA For example, it moves for a second or to a certain point and then it's opacity becomes zero, and then then returns to 1 and then seamlessly carries on its path for another second where it blinks again. Is it possible to do this with a single expression on one tween or do you have to chain animations together to make it work. One other question I have is about compatibility. I have tested GSAP on Chrome, Firefox, IE, Opera, iOS and Chrome on Android. It works fine on all that. I was wondering if it's compatible with other Android browsers? Many thanks for your help. I think GSAP is great. Pebble

Hi all, I am trying to find a way to export the timeline animation to a mp4(compressed) video. Does someone know how this can be done? Will really appreciate your inputs and suggestions. Thanks

Hello there, I am trying to call 3 different functions to animate 3 different animation in one shot through init() function. How I can achieve this properly. function init() { TweenMax.set("#object", {alpha: 0}); a(); b(); c(); } function a() { TweenMax.to("#object1", {x: "+=100px"}); } function b() { TweenMax.to("#object2", {x: "+=200px"}); } function c() { TweenMax.to("#objec3", {x: "+=300px"}); } Hopefully I will know the solution as soon as possible thanks gsap masters!

Hi Greensock 1. Why is 2 movieclips both rotated from -90 to 190 going cw using TweenMax.to and ccw using TweenMax.from? 2. Is there a way to make .from go CW in this example? note: both going cw when var rotateTo <=180 in example below //HippieSvin import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; var rotateTo:Number = 190; var rotateFrom:Number = -90; // CCW // RED : TM animating FROM -90 to 190 var c1:MovieClip = new MovieClip(); this.addChild(c1); c1.x = 275; c1.y = 200; c1.rotation=rotateTo; var red:MovieClip = new boxRed(); c1.addChild(red); red.x=-50; TweenMax.from(c1, 3, { delay:1.0, rotation:rotateFrom, ease:Quad.easeInOut }); // CW // GREEN : TM animating TO 190 from -90 : this goes CW var c2:MovieClip = new MovieClip(); this.addChild(c2); c2.x = 275; c2.y = 200; c2.rotation=rotateFrom; var green:MovieClip = new boxGreen(); c2.addChild(green); green.x=-50; TweenMax.to(c2, 3, { delay:1.0, rotation:rotateTo, ease:Quad.easeInOut });

Hey all, I have a query regarding animating along an SVG path. I have been able to get the circles animated as per the codepen demo but due to the path going in different directions, i'm struggling to figure out what I do with the arrows. Basically, the arrows are down, left and right and I was wondering if there was a way that I could change the direction of these arrows depending on where they are along the path? I just think the animation will look odd when the arrow is animating downwards but is facing right for example. The codepen demo is as far as I have got in terms of animating this. Thanks

Is there any way to less this code? var tl = new TimelineMax({delay: 1}), visible = 1, hidden = 0, aveDur = 1; tl.to("#txt1", aveDur, {alpha: visible}) .to("#txt1", aveDur, {alpha: hidden, delay: 1}) .to("#txt2", aveDur, {alpha: visible}) .to("#txt2", aveDur, {alpha: hidden, delay: 1}) .to("#txt3", aveDur, {alpha: visible}) .to("#txt3", aveDur, {alpha: hidden, delay: 1}) Any suggestions are welcome!

I am using TweenMax for some animations. The animations work fine in Chrome, but Safari and Firefox both have issues with the center animation. I though GSAP removed those browser issues, so I am thinking I must be doing something wrong. Any help would be appreciated. Thanks!

Hi everyone! I am working on a project that requires animating a lot of elements on the page. I am trying to use SVG instead of Canvas, and thought of using <g> and <use> tags to keep the SVG code lightweight. Basically, I am trying to copy paste the svg element and its animation, but placing it in a different position. However, I can't seem to animate the <use> tag (see attached Codepen). I tried adding an id="redCircle" to it too, but javascript doesn't seem to pick it up and won't animate it. Any help?

Hi every one. What do you think about snow animation into a wheels? See attached picture. Which library can i use?

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

Hello everyone! I am trying to use GSAP with Animate.css to create flexible animation for banner ads. I know this is possible but I would like to know the best way to use GSAP + Animate.css to improve my coding. I've provided link for codepen! Any suggestion would be great! If you have experience with GSAP + Animate.css please comment here! What is Animate.css? --> a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Thanks GSAP Masters! HTML: <div id="circle"></div> CSS: #circle { width: 200px; height: 200px; background: #222; border-radius: 200px; } Javascript: window.onload = init; function init() { TweenMax.set("#circle", {alpha: 0, x: "+=100px", onComplete: a}); } function a() { TweenMax.to("#circle", 1, {delay: 1, alpha: 1, onStart: aa}); TweenMax.to("#circle", 1, {delay: 1.5, onStart: ab}); TweenMax.to("#circle", 1, {delay: 2, onStart: ac}); TweenMax.delayedCall(2, ad); } function aa() { $("#circle").addClass("animated wobble"); } function ab() { $("#circle").css("margin-left","100px"); } function ac() { $("#circle").addClass("animated bounce"); } function ad() { $("#circle").removeClass("animated bounce wobble") }