Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi All, I am trying to animate a mask in a Flash HTML5 Canvas document using TweenLite. I am trying to animate a symbol that is in a mask layer. But when I try I get a JavaScript console error: TweenLite.min.js:12 Uncaught Cannot tween a null target. My other objects animate fine. I believe I have all the proper .js files loaded in the HTML (easelJS, tweenJS, movieclip, preloadJS) and the Tweenlite files (CSSPlugin, EasePack, Tweenlite). Here is the code I used that throws the error. TweenLite.to(this.leftYellowStripeMask, .5, {y:-9, ease:Quad.easeOut, delay:.3}); I'm guessing masks are not supported this way? Thanks,
  2. Hi Guys, I'm having a few issues with a little page turner I'm trying to build. I started with Rodrigo's pen (Thank you ) and modified it to resemble a simple hard book (http://codepen.io/rhernando/pen/vjGxH/) where you click the pages and they turn. It currently works quite well in Chrome, Opera and Safari, but has issues in IE and Firefox. Firefox nearly gets it, but doesn't animate the page shading on the before element quite correctly (using CSSRulePlugin). It correctly shades the first page as it's rising, but fails to animate the second page as it's dropping (that might make more sense if you view the demo in Chrome first, then in Firefox) IE 11/10 ignore the perspective on the .Wrapper element. I've seen that you can keep the perspective in IE by repeating the transforms on the child elements, but this hurts my head when I try to do this with GSAP by setting values using TweenMax/TweenLite. Does anyone have any ideas? I've not tried Edge yet... will give that a go later.
  3. Hi all, In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here! Cheers
  4. Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!
  5. Hi, Been trying to get this to work for a little while now, a bit stuck. CodePen: http://codepen.io/Dev-KP/pen/jbMWxy Basically the individual animations work: .add(aninIn(copy1, 20)) //.add(aninOut(copy1, 20)) When one of them is commented out the other will work perfectly, but having them both there seems to make them merge. I'm guessing it's something to do with the .set in the returned tiimelines? If I am not mistaken the nested timelines should play one after another? Or is this something for immediateRender? Cheers P
  6. Hello all, I wasn't sure where to put this so i'm just going to leave it here, please move it if it's in the wrong forum! I work as Senior designer at Sony Music UK and we recently launched our new official website that is powered by Greensock. In fact I now use GSAP on every artist website or web application that we build in house. GSAP has truly revolutionised the way we are able to work, so thank you very much and keep up the good stuff! Below are a few of our recent projects using GSAP. Loads more coming before the year is finished too http://sonymusic.co.uk http://alexadairmusic.com http://little-mix.com http://calvinharris.co.uk http://bmthofficial.com
  7. I've read through the docs but couldn't find anything relating to this in there. Is it possible for us to trigger functions or other tweens whilst dragging in draggable? For example if you started dragging, the container would tween to an opacity change or the cursor would change whilst you were dragging then change back when you let go. I've attached a pen I have that uses draggable if it's any help to work with. Thanks!
  8. Hello, I'm developing a banking app where users can transfer money, pay bills, etc. The app is entirely free to download, no ads or something like that. What license should I use? And do I need a bussiness license if the user is charged a little amount from the amount he want to transfer, like paypal. Thanks!
  9. Hi there. I'm using TweenMax to do position tweens on divs containing text that is styled using a font family from google fonts. The font weight is bold. I find on Firefox and Safari, the font seems to change weight during the tween. Is this a known bug? (don't have time to put together a codepen at the moment but will if needed)
  10. I am using TweenMax to do a simple animation on slides, which looks like this: TweenMax.to(slides, 1.2, {y: (-100 * slideNum) + '%', ease: Power1.easeInOut}); I can see in google dev tools that layout is invalidated and recalculated for each update when using this function, but the translate css property should not need to recalculate the layout but only use composition. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Is this a bug, a sideeffect to animation using js or just me misunderstanding the concept completely
  11. Hi there. This seems rather simple but actually might not be as a simple of a solution as I was hoping for. I'm trying to transform the height of a div: #mountain { position: absolute; top: 175px; left: 18px; width:123px; height:46px; background-image:url(mountain.png); } Using this GSAP TweenMax.from('#mountain', .5, {height:0, transformOrigin:"bottom"}); On <div id="mountain"></div> However it does transforms the height, it scales the div from the top down regardless of the transformOrigin setting. What am I missing? I suspect transformOrigin does not cover height? Can you suggest a workaround for what I'm trying to accomplish? Thanks.
  12. Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ jQuery(document).ready(function(){ // place custom JS here console.log("DOM ready"); // window, links, and other assets loaded jQuery(window).on("load", function(){ // or place custom JS here to make sure DOM is ready and the window is loaded console.log("window, links, and other assets loaded"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran
  13. Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul
  14. Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?
  15. Hi, I am having a bit of trouble with this script we have been working on. Trying to get the Pagination to work in sync with the next/prev and auto rotate slider. Here is our script. Any help is appreciated. $(function(){ var $slides = $(".slide"); var currentSlide = 0; var slideDot = 1; var stayTime = 10; var slideTime = 1.3; var numberOfSlides = $slides.length -1; TweenLite.set($slides.filter(":gt(0)"), {opacity:0,display:'none'}); TweenLite.delayedCall(stayTime, nextSlide); function nextSlide(){ TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); } $('.go-next').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = ++currentSlide % $slides.length; slideDot = ++slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.go-prev').click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideDot, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = --currentSlide % $slides.length; slideDot = --slideDot % $slides.length; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); }); $('.banner').mouseenter(function() { TweenLite.killDelayedCallsTo(nextSlide); }); $('.banner').mouseleave(function() { TweenLite.delayedCall(stayTime, nextSlide); }); for(i = -1; i < numberOfSlides; i++) { (function() { var slideIndex = i; var slideLabel = i + 1; var x = $('<a id="slide' + slideLabel + '"href="#" class="paginatorLink"><i class="material-icons"></i></a>'); x.click(function() { TweenMax.to(".paginatorActive", 1, {css:{className:"paginatorLink"}, delay:0}); TweenMax.to("#slide" + slideLabel, 1, {css:{className:"paginatorActive"}, delay:0}); TweenLite.killDelayedCallsTo(nextSlide); TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:0,display:'none'} ); currentSlide = slideLabel; TweenLite.to( $slides.eq(currentSlide), slideTime, {opacity:1,display:'block'} ); TweenLite.delayedCall(stayTime, nextSlide); }); $('.pagination').append(x); })(); } });
  16. I was wondering how do you detect that GSAP is loaded into the DOM and ready to animate the banner? DoubleClick provides you with this in their example of polite loading a banner, where the JS and CSS is loaded later into the DOM. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ //Load in Javascript var extJavascript = document.createElement('script'); extJavascript.setAttribute('type', 'text/javascript'); extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js')); document.getElementsByTagName('head')[0].appendChild(extJavascript); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("container_dc").style.opacity=1; document.getElementById("loading_image_dc").style.opacity=0; document.getElementById("container_dc").style.display = "block"; } </script> But I found that when I added GSAP to this, my code would always load first then fire off and not wait for GSAP to be ready. So a dug a little deeper into DC's Enabler.js and found they actually had a loadScript function with call back. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> var TweenLiteJS = false, CSSPluginJS = false, EasePackJS = false; //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){console.log("TweenLite Loaded"); TweenLiteJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){console.log("CSSPlugin Loaded"); CSSPluginJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){console.log("EasePack Loaded"); EasePackJS = true;}); Enabler.loadScript('script.js', function(){console.log("BannerScript Loaded"); Banner.init();}); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getUrl("styles.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("banner").style.opacity=1; document.getElementById("loading").style.opacity=0; document.getElementById("loading").style.display = "none"; document.getElementById("banner").style.display = "block"; } </script> So I ended up with this in the HTML and then this in the JS Banner.init = function(){ //Just an extra check to make sure all library files have loaded as well. if (document.readyState === "complete") { if( !TweenLiteJS || !CSSPluginJS || !EasePackJS) { console.log("Not ready to animate yet, try again in 500ms"); setTimeout( Banner.init, 500 ); } else { console.log("Animation start"); Banner.animate(); addListeners(); } } } And it works, the animation isn't fired off before its ready to. I was just wondering if I've over complicated things, or I've missed something. I actually got this idea from @letssock when talking about implementing GSAP into Celtra.
  17. Hi! I'm working to new animation engine! Cross-browser and back to IE8 support for transform (rotate, scale, translate), but it's always uses transform-origin is 50% 50% or 0px 0px! I obtained and installed TweenMax.js CSSPlugin IE8 transform script and works on any transform-origin! My project is MIT-Licensed. Is it possible use code on my project free or need BUY license or completely restricted? Sorry for bad english!
  18. Just started using GSAP and have built a grid using TimelineLite animations (see Codepen below). I'm keen for any comments on ways to improve as I'm pretty new to all this.
  19. Hi GSAP authors! I'm need help, i maked tweening engine, Animo.js (github.com/dalisoft/animo.js - 2 branch (v2 and master v1). I Highly optimized the performance, but i dont know why i can't tween smooth than GSAP. I have question, why TweenMax size too large??
  20. rgfx

    Animating Timescale

    Trying to start my animation slow and then speed up gradually. I read there is way to animate timescale, but am not sure how. Does https://greensock.com/customeasework for JS? If so is there an example of implementation? Thanks.
  21. Hi there. I'm interested in doing step animation but using the smallest engine you have to offer for GSAP, which is TimelineLite (correct?) I was wondering if there was an equivelent to something like this http://codepen.io/anon/pen/yNpQEq But with GSAP? Really need a light weight solution as most sites are not allowing more than 40k zipped HTML5 packaged files still and CSS3 older browser doesn't compare to Greensocks.. I did see this http://codepen.io/MAW/pen/MYdwRP But TweenMax is HUGE. Halp? Thanks.
  22. Forgot to clarify in title -- been using TweenMax Hi Guys If you take a look at my codepen, you can see there are multiple 'dashes' animating on the left side of the screen. I have been slowly stripping down this codepen ("GSAP Bezier: Cubic"). But these dashes are added as part of the bezier animation, and I'd like to add them without that... My goal is add multiple 'dashes' on page load, without delay. And add these at specific positions, without motion. Breaking down the task as I can understand it: Load the first SVG all objects are based on, as a variable Multiples of the SVG variable Add 10x more of that variable instantaneously Place these variables at specific x & y positions in the window Looping fade animation (currently applies to all not individual) Stretch goal! Add a nice fade in / fade out on all of it when you land / leave the page. 2.1 & 2.2 is where I feel stuck. Pointers in the right direction? I think one of my biggest issues is that I don't know the correct vocabulary to use while searching... Ultimately, I'd like to get the dashes spaced evenly on the x-axis, and randomly within a range on the y-axis, but animate a fade. That specific Math function is something I think I can work out later. Full disclosure -- I'm totally new to all of this (both GSAP and JS), so I'm in over my head a bit. But trying to get there by doing something challenging! Also apologies for the junk list of links at the end of the codepen JS section, it's the easiest place for me to stash links while I'm tinkering. Thanks!!
  23. Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.
  24. Hello guys, I'm new here, and i'm trying to make this SVG rotate forever, but it just won't work, i've tried making the time -1 and it still wont work. any suggestions? Thanks. <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function(){ var logo = document.getElementById("logo"); var tween =TweenLite.to(logo, 5, {rotation:360, transformOrigin:"50% 50%"}); //keywords tween.restart(); } </script>
  25. Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you