Jump to content

Search the Community

Showing results for tags 'gsap'.

  • 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. 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
  2. Guest

    Method onComplete - few functions

    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?
  3. Guest

    GSAP Draggable X and Y coords

    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?
  4. 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
  5. 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?
  6. 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!
  7. 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!
  8. 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!
  9. 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
  10. 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(); });
  11. 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); } });
  12. 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?
  13. 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
  14. 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!
  15. 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.
  16. 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!
  17. 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!
  18. 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?
  19. 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
  20. 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
  21. 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/
  22. I'am trying to get general idea how to get current value of rotation on a div object using Draggable rotation property. Any help would be appreciated.
  23. So this is a classical processing pipe-line for GPU rendered animations via CSS transform: 1) We start start to animate a block from HTML with, for example, TweenLite.to(x:100... 2) At that moment (very start), what happens internally in browser, is that this block is Repainted to a separate composite layer. 3) This layer (when ready) is pushed to VRAM for fast access and animating. 4) Layer decomposes and clears from VRAM when the browser thinks it must. And as we know this works pretty well! But, Where my problem arises is POINT 2,3. On lower hardware, when the initial repaint happens and layer is pushed to VRAM, there is some 100-200ms LAG. And when the animation it self is 1sec or less, this LAG just kills it: a) first of all there is a kind of a shutter at that moment, secondly.. I start to see the object animation already 30% complete (for ex. if the animation is x from 0 - 100 in sec, I start to see it happening on x=>30), when the layer is ready. The potential solutions: 1) Use will-change or empty transform to fool the browser, to push layer before animating. Well.... will-change is kind of experimental and it might be removed, and does not work on IE. empty transform does't work on chrome any more. And the list goes on. And anyway, at some point the browse might consider destroying the layer (to much idle, etc.). So very unstable. 2) It would make sense to me, to animate an object via transform only when the repaint is finished. Otherwise it will always look crappy. As there are some tips out there http://stackoverflow.com/questions/14578356/how-to-detect-when-an-image-has-finished-rendering-in-the-browser-i-e-painted (i like second answer), how to detect the repaint happend, maybe this can be patched to GSAP? What do u think of all this?
  24. Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
  25. Hello everybody! I am introducing my effort to clone/mimic the reusable animation from animate.css into greensock version. I am inviting everyone here to contribute to the project I've started on Github! First I would like to thank to the founders and administrators who helped me to understand the difference between animate.css and gsap in terms of animation. GreenSock is the one who has flexible building blocks to create amazing web animation. So yeah! Here we go I am now every masters and new user to contribute to my unofficial plugin! You can find the repo links and demo below! DEMO: http://warengonzaga.github.io/sites/animatecssplugin.html (Underdevelopment) GITHUB REPO: https://github.com/WarenGonzaga/AnimateCSSPlugin (Contribute Today!) OFFICIAL GROUP CHAT: https://tlk.io/animatecssplugin/ OFFICIAL BLOG: http://warengonzaga.com/blog/2016/09/20/animatecssplugin-js-gsap/ (Dead Link wait for further updates) ORIGINAL TOPIC: http://greensock.com/forums/topic/15082-best-way-to-use-gsap-with-animatecss/ Calling for @jonathan, @carl, and also @jack they are the GSAP Legends! Best Regards, Waren Gonzaga