Search the Community

Hi All I'm sorry if this is an easy solution but I couldn't find it and I'm totally new. I have several elements with an infinite rotation but for some reason is working only the first one. Here is my code: (function($) { var green = $('.green'), red = $('.red'), brown = $('.brown'), // tl = new TimelineLite(); tl = new TimelineLite(); tl .to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }) .to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15") .from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15"); })(jQuery); Thank you so much for your help!

Hi, all. I just started to learn GSAP, and I got a problem with the connection MorphSVGPlugin library. I use these plugins <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> <script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js"></script> But when I watching moving about MorphSVG I could not connect properly library. Can you help me to fix this problem?

im try to fire timeline when a li it's hover, so i create a var with my timeline, and with event.delegateTarget to find children and not all with .CLASS this is my code $(".gb-help-list ").on('mouseover', 'li', function (e) { console.log('mouse'); var tl = new TimelineLite(); tl.to($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut}) .to(".line-help", 2, {width: '100%', ease: Power4.easeOut}, "-=1"); }).on('mouseout', 'img', function (e) { TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0}); }); I don't see any error in console, but this : o($(event.delegateTarget).find('.line-help'), 2, {width: '100px', ease: Power4.easeOut} doesn't fire.... anyone can helpme? Thx in advance

Hey guys, I just started using GSAP and so far I am very impressed. I am running into some performance issues though, so I could really use some help! I am working on creating a web application that is kind of like a guitar hero for piano. I need the application to be able to animate a bunch of rectangles downward at a constant rate (each rectangle represents a note in a song). I am running into some performance issues though, since a song can contain thousands of individual notes. I have created a codepen that demonstrates what I am talking about. There is a stutter once and a while that I cannot stand. Here is a link to the codepen http://codepen.io/MicahHauge/pen/EyJjGA?editors=0011 Let me know if you see a better way of doing this that will prevent the stutter. Thanks, Micah Hauge

Hello guys, I recently started developing with GSAP and i love it so far, its really great but my problem is that i am not able to change the anchor point of the circle... even if we assign a top, left and bottom anchor point to it it just takes the default anchor point on the circle due to this issue the animation isn't the same on both sides and it looks really weird. does someone know how to fix this issue? i also saw a solution over here from OSUblake, but i am not able to figure out how to make that work http://greensock.com/forums/topic/14129-morphsvg-change-start-and-end-point/ kind regards

I am new to the study of GSAP. In the study a ready example of a HTML5-game ( GSAP ) I have a question. The method onComplete is passed to one callback function: ... onComplete: oneFunction Is it possible onComplete method to pass multiple callback functions? ... onComplete: firstFunction secondFunction For example, I have a task to hang on one event call multiple functions. Or is this way impossible and the only solution in this case is to call the callback functions in the chain - at the conclusion of one function this function calls another function and so on?

I'm new to GSAP. I'm learning to work with the Draggable plugin. I can't understand the principle of the x and y properties of the Draggable plugin. I gave an example on Codepen to illustrate. Why when you click on the element block in the console returns a 0 value on the X-axis and the Y-axis? Because this unit is set to 20 on both axes. How is the calculation of the coordinates for this block?

Hi guys, I just an article on the GSAP Blog about the "will-change" and Chrome issue with scaling images and after copying the codepen provided in the article I started to play around a solution that possibly could help lots of devs around. So, if you read this article http://greensock.com/will-change, you will see that the first image get blurry when scaling. I added "transformPerspective" and "z" properties on the animation and the scaling goes smoothly and works well. I have been using it for a while now and I hope you guys can find it useful as well. See the codes modified here: http://codepen.io/fernandofas/pen/jVyEpg Kind regards, Fernando Fas

Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport?

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!

Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner. I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow. have a look at my codepen to see what i am trying to achieve here: https://codepen.io/Caderial/pen/LbYRVZ What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops? Please advise. I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution. thanks everyone!

Hi guys! I have been browsing through your banner inspirations: http://greensock.com/forums/topic/12477-inspiring-html5-banner-examples-with-gsap/?hl=html5%20banner and found this really nice particle animation created by user Oliver15Years: http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ I am refactoring it to create a steam animation but can't figure out how to kill the particle engine ("spawnSteam") in my timeline. I would like to ensure that the generator is being killed in my playEnd function. I tried adding spawnSteam.kill(); // but it didn't work.. Thanks so much everyone!

Hi, I'm not an expert in GSAP and I have some troubles with my SVG animation. Indeed, I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547 My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes. Here is my JS code (the link to my codepen) : $(window).load(function () { $(function () { var first = $('#firstletter'), second = $('#secondletter'), competences = $('.competence'), // Sample script for Tweening on a Timeline tl = new TimelineMax({ delay:0, paused: false, yoyo: false }); tl.fromTo([first, second], 3, { drawSVG: "100% 100%" }, { drawSVG: "0% 100% ", ease: SlowMo.easeOut }); tl.fromTo(competences, 1, { opacity: 0, top: 0 }, { opacity: 1, top: "50%" }); }); $('#loader-overlay').delay(5000).fadeOut('slow'); // 5 sec de délai avant que la div ne disparaisse }); Thank you for your help

The basic functionality: when a button is clicked, that button's corresponding target div animates in. Each button has it's own unique animation. Animations are declared outside of the click function, and the targeted animation elements should populated the animation when the click function is run. Problem is, it's not quite working for me... <ul> <!-- Search Trigger --> <li> <span class="trigger" id="search-trigger" >Search Trigger</span> <div class="reveal-recipient-container" id="search-container"> <div class="reveal-recipient" id="reveal-recipient-search">Target to reveal when I press Search Trigger </div> </div> </li> <!-- Nav Trigger - Target element sits outside ul --> <li> <span class="trigger" id="nav-trigger">Other Trigger</span> </li> </ul> <div class="reveal-recipient" id="reveal-recipient-nav" >This recipient is intentionally outside the ul containing the triggers</div> Here is my GSAP code. /// I want to store my animations OUTSIDE of the click function to keep the code clean var searchAnimation = new TimelineLite({paused:true, reversed:true}); var navAnimation = new TimelineLite({paused:true, reversed:true}); var duration = .3 searchAnimation.set(recipientContainer, { display:'block', autoAlpha:1}) .fromTo(recipient, duration, { display:'none', yPercent:'-100%', autoAlpha:0, ease: Back.easeOut.config(1.7)},{ display:'block', yPercent:'0%', autoAlpha:1, ease: Back.easeOut.config(1.7) }); navAnimation.fromTo(recipient, duration, { display:'none', yPercent:'100%', autoAlpha:0, ease: Back.easeOut.config(1)},{ display:'block', yPercent:'0%', autoAlpha:1, ease: Back.easeOut.config(1) }); $('#search-trigger').click(function() { recipientContainer = $('#search-container') recipient = $('#reveal-recipient-search') searchAnimation.reversed() ? searchAnimation.play() : searchAnimation.reverse(); }); $('#nav-trigger').click(function() { recipient = $('#reveal-recipient-nav') navAnimation.reversed() ? navAnimation.play() : navAnimation.reverse(); });

So, I know this is going to be a huge wall of code (so maybe just go through to the codepen) but I'm having a very minor issue. For the most part, everything that I've coded works (albeit, likely very bloated and ugly code)... except: the very first animation when "Trigger 2" is pressed doesn't work. Every subsequent one does. The first, doesn't. My html is as follows: <ul> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-1">Trigger 1</span> <div id="reveal-recipient-1" class="reveal-recipient">Target to reveal when I press Trigger 1</div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-search" id="search-trigger">Trigger 2</span> <div class="reveal-recipient-container" > <div id="reveal-recipient-search" class="reveal-recipient">Target to reveal when I press Trigger 2 <input id="boom" type="text"> </div> </div> </li> <li> <span class="reveal-trigger" data-target-id="reveal-recipient-3" id="nav-trigger">Trigger 3</span> </li> </ul> <div id="reveal-recipient-3" class="reveal-recipient">This recipient is intentionally outside the ul containing the triggers</div> CSS: .open { background-color:green; } li { float:left; list-style-type:none; } .reveal-recipient-container { //border:solid 1px red; height:120px; display:none; overflow:hidden; position:relative; } .reveal-trigger { padding:1em 2em; display:block; background-color:hsla(110,60%,50%,1); border-radius:3px; margin:5px; cursor:pointer; &:hover { background-color:hsla(110,60%,70%,1); } &.active { background-color:hsla(130,60%,40%,1); color:white; } } .reveal-recipient { position:absolute; width:100px; transform:translateY(-100%); display:none; background-color:white; padding:1em; box-shadow:0 2px 0 rgba(0,0,0,0.05); border:solid 1px rgba(0,0,0,.1) } And then, my loyal javascript: $(document).on('click', function(event) { if (!$(event.target).closest('.reveal-recipient').length){ if (!$(event.target).closest('.reveal-trigger').length){ TweenMax.to($('.reveal-recipient'), .3, {display:'none', y:'-100%', autoAlpha:0}); //remove open class from any open $('.reveal-recipient').removeClass('open'); $('.reveal-trigger').removeClass('active'); $('.reveal-recipient-container').hide(); } } }); $('.reveal-trigger').click(function(e) { //remove active class from other triggers $('.reveal-trigger').not(this).removeClass('active'); //toggle active class on this trigger $(this).toggleClass('active'); //get target element var triggerId = $('#' + $(this).attr('id')); var target = $('#' + $(this).attr('data-target-id')); var targetContainer = $($(target).parent().closest('.reveal-recipient-container')); // Animations if($(this).is('#search-trigger')) { var animation = TweenMax.to(target, .3, {display:'block', yPercent:'0%', x:'0%', autoAlpha:1, onComplete:function() { //once animation is complete, if the target has an input, focus on that input if(target.find('input').size() > 0) { target.find('input').focus(); } }}); } if($(this).is('#nav-trigger')){ var animation = TweenMax.to(target, .3, {display:'block', y:'0%', x:'100%', autoAlpha:1}); } //hide all elements of "target" class, except the current target if($('.reveal-recipient.open').not(target).size() > 0) { //TweenMax.to($('.target.open').not(target), .1, {display:'none', y:'0%', autoAlpha:0}); TweenMax.to($('.reveal-recipient.open').not(target), .3, {display:'none', yPercent:'-100%',x:'0%', autoAlpha:0}); //remove open class from target elements that are now hidden $('.reveal-recipient.open').not(target).removeClass('open'); $(targetContainer).delay(300).hide(0); } //if this element is now active if($(this).hasClass('active')) { //show current target element animation.play(); //indicate that this target class element is now open target.addClass('open'); $(targetContainer).show(0); } //if the element is no longer active else { //hide the target TweenMax.to(target, .3, {display:'none', yPercent:'-100%', x:'0%', autoAlpha:0}); //remove open class from newly hidden target element target.removeClass('open'); $(targetContainer).delay(300).hide(0); } });

http://codepen.io/anon/pen/WGdWqL If I remove addPause line, the animations end as they should. With it, for some reason red (stalled) block goes nuts Could be that this is a bug? If I want to use addPause and modify red block in end of it's tween, how can I get around this?

Hello! I am trying to figure out why this codepen (included), even though I have told it "force3D: true" in both the set() and to() methods, is not using "matrix3d" for the transform. I can't seem to figure out what the difference is between my codepen and the GreenSock codepen here: https://codepen.io/GreenSock/pen/kingu. Can anyone point me to the difference? Maybe I just keep missing something simple... Thanks, Frank

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!

I have code that looks something like this http://codepen.io/anon/pen/XjgVWN . The problem is, that addPause overwrites previous added addPause (with same time), and the callback is gone. Any tips how to make this work? How can I get both callbacks in same time? P.S. I cant create a Master function, with sub-functions in my case :/, my real project code is very dynamic.

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!

Hello everyone, I am new to this place and I'm quite new to the GSAP world. I'm very excited about working with this library and watching the examples I was really impressed with this one. I have seen that there is a huge use of three.js library and I was wondering about how three.js and GSAP works togheter. For example, the camera movements are just made with three.js or there is a way to replicate that animation only with GSAP or both? I'm just looking for some hints! Thank you in advance! P.S. If I'm in the wrong section or off-topic, please forgive me!

Here's the StackOverflow question before this post: http://stackoverflow.com/questions/39711783/the-window-detects-scrolling-inexplicably/39713742#39713742 I have a fairly simple function that detects a window scroll. Fires a timeout event (500ms) when the user stops scrolling. This ends then listener and timeout. I then animate(GSAP) the window to a certain point. Once the animation is complete, the listener is fired up again. Sometimes... a scroll is detected again, so the whole function is fired twice. Please look into console to see this happening. code here: var timeout; var onScroll = function() { console.log('scrolling...'); if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(function () { console.log('done scrolling... stop listening...'); $(window).off( "scroll", onScroll); clearTimeout(timeout); timeout = null; // aniamte scroll console.log('start animating scroll...'); TweenMax.to($(window), 0.1, {scrollTo:{y:500}, onComplete:function(){ $(window).on( "scroll", onScroll); console.log('done animating scroll. Start litening again.'); }}); }, 500); } $(window).on( "scroll", onScroll); example: http://codepen.io/rgbjoy/pen/RGVLBK?editors=0011 How is this happening? Should I be asking quantum theorist?

Hello guys! I need to know how to replicate this animation using GSAP only! I dont have any idea on how to achieve the animation from animate.css. If you have some suggestion please let me know. If you know how to do it please reply. I've used rotateZ but doesn't copy the animation! Here's the codepen link: http://codepen.io/Waren_Gonzaga/pen/rrmXNZ Regards, Waren

Hi All, I am trying to play around with the demo file provided in the 'Quick Start: GSAP and Adobe Animate CC' article; https://greensock.com/animatecc-quickstart All I am trying to do is successfully add an additional symbol into the timeline and apply any animation to it in the js file. Here's what I am doing: 1. Create new layer - 'Layer 1' 2. Create new symbol (a red rectangle) - 'test' 3. Select symbol ('test') and drag onto stage with 'Layer 1' selected. 4. Duplicate existing .from in tl and change symbol name to be 'test' 5. Watch in despair as ad display blank I cannot for the life of me get this to work without receiving the error 'Uncaught Cannot tween a null target.' along with a blank ad. It seems that the symbol isn't being referenced in the js file. Here is the original js he uses; //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); I am just adding a tl.from above the first tl.from (See below); //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); //Added new symbol ref in line below tl.from(root.test, 1, {y:"500", ease:Back.easeOut}); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); Can anyone point me in the right direction, or point out to me what I am doing wrong? Thanks!! Tom

Hi, Check out this new Greensock tutorial that shows how to create smaller, faster HTML5 ads from Adobe Animate with GSAP. http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/ Topics covered-- Using GreenSock with Adobe Animate (Flash) Using ActionScript (AS2 or AS3) or JS for HTML5 ads Automatically optimizing your assets with one click Working with clickTags Retina/High DPI asset setup Handle multiple exits on buttons with onClick Handle rollovers with onMouseOver/Out Call JavaScript on the page from timeline code in the FLA Show an ad preloaded Test and validate the ad http://www.fla-exporter.com/GreenSock-Tutorial-Smaller-Faster-HTML5-Ads-with-FlaExporter-and-Adobe-Animate/