Search the Community

Hi. We have a GreenSock TweenMax animation. Now we want to pause an objects animation, and have it resume the animation later on at exactly that point. If we just use resume(), then the animation jumps forward of course. So we wanted to pass resume() or play() parameters to have the animation resume at the points where it was stopped. However, the parameters are ignored. It doesn't matter what we enter there. So, for example: object.pause() pauses the animation object.resume() makes it jump a little bit forward object.resume(0) does exactly the same, as does object.play(20) or whatever we try No error message is shown. What are we missing? Thanks for any help

I am using TweenMax to create some small banner ads. The client wants some timed things, no problem. But I'm wondering why in the following code, I have to declare "var pointer" more than once. Why is the initial declaration (is it not a global variable here?) not available to the endseq function? That is, if I remove the var pointer line (in blue) from the endseq function, the code breaks. Stupid question, I know, but JS is not my cup of tea. <script> window.onload = function(){ var pointer = document.getElementById("arrow"); var text = document.getElementById("message"); TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true}); TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq}); } function endseq(){ var pointer = document.getElementById("arrow"); TweenMax.to(pointer, 1.9, {rotation:360}); TweenMax.to(pointer, .8, {x:-5, repeat:0}); } </script>

Hi, I am animating several elements at a time, sometimes using TimelineMax and sometimes using TweenMax. What I am trying to do is check if all Tweens are complete in order to prevent certain user events. I'm aware you can use TweenMax.isTweening() to check specified elements for tweening but is there a way can check for all tweens without storing an array? Many thanks.

I tried use TweenLite in this pen: http://codepen.io/lagden/pen/QjQbwp?editors=001 and nothing happens! I would like to use TweenLite, but I don't know which feature is missing for it works!! TweenMax is very heavy for it! This is my current code! It is using TweenMax and it's working. TweenMax.fromTo(circle, duration, { x, y, scale: 0, opacity: 1, transformOrigin: '50% 50%' }, { scale: 10, opacity: 0 });

Hi there, I have the following TweenMax sequence: expandedAnimation = function() { var i = 0; var a = 1; var d = 2.25; var t = 0; var o = 4.25; TweenMax.set('#dc_logo', {alpha:a}); TweenMax.set('#videoContent', {alpha:i}); TweenMax.set('#exp_txt1', {alpha:i}); TweenMax.set('#exp_txt2', {alpha:i}); TweenMax.set('#exp_txt3', {alpha:i}); TweenMax.set('#exp_txt4', {alpha:i}); TweenMax.set('#exp_txt5', {alpha:i}); TweenMax.set('#exp_txt6', {alpha:i}); TweenMax.set('#exp_txt2_1', {alpha:i}); TweenMax.set('#exp_txt2_2', {alpha:i}); TweenMax.set('#exp_txt2_3', {alpha:i}); TweenMax.set('#exp_txt2_4', {alpha:i}); TweenMax.set('#exp_txt2_5', {alpha:i}); TweenMax.set('#exp_join', {alpha:i}); TweenMax.set('#bar', {alpha:a, width:0}); TweenMax.set('#logo', {alpha:a}); TweenMax.to('#exp_txt1', t, {alpha:a, delay:.25}); TweenMax.to('#exp_txt2', t, {alpha:a, delay:.5}); TweenMax.to('#exp_txt3', t, {alpha:a, delay:.75}); TweenMax.to('#exp_txt4', t, {alpha:a, delay:1}); TweenMax.to('#exp_txt5', t, {alpha:a, delay:1.25}); TweenMax.to('#exp_txt6', t, {alpha:a, delay:1.5}); TweenMax.to('#exp_txt1', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt3', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt4', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt5', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt6', t, {alpha:i, delay:d}); TweenMax.to('#exp_txt2_1', t, {alpha:a, delay:2.5}); TweenMax.to('#exp_txt2_2', t, {alpha:a, delay:2.75}); TweenMax.to('#exp_txt2_3', t, {alpha:a, delay:3}); TweenMax.to('#exp_txt2_4', t, {alpha:a, delay:3.25}); TweenMax.to('#exp_txt2_5', t, {alpha:a, delay:3.5}); TweenMax.to('#exp_txt2_1', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_2', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_3', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_4', t, {alpha:i, delay:o}); TweenMax.to('#exp_txt2_5', t, {alpha:i, delay:o}); TweenMax.to('#exp_join', t, {alpha:a, delay:4.25}); TweenMax.to('#bar', .5, {width:82, delay:4.25}); TweenMax.to('#exp_join', t, {alpha:i, delay:5.5}); TweenMax.to('#bar', t, {alpha:i, delay:5.5}); TweenMax.to('#logo', t, {alpha:i, delay:5.5}); TweenMax.to('#dc_logo', t, {alpha:i, delay:5.5}); TweenMax.to('#videoContent', t, {alpha:a, delay:5.5, onComplete:startVideo}); } startVideo = function() { vplayer.play(); } I know this is probably simple for some, but I'd like to convert this to TimelineMax because I need the animation to stop executing if my banner is closed, and reset, and begin animation again if it's re expanded. Right now, if you close the ad mid animation, and then re-expand, the code that was previously executing is still running, and then a new set starts again making a huge mess. When I tried converting to TimelineMax by using the var tl = new TimelineMax() and then tl.add to each one the delays got all messed up and I wasn't sure how to get the same results. Is there an easier way to reset/pause my function without totally redoing all my delays and etc? Any help would be appreciated. Thank you

Hi all, I am currently working on a little project and i wanted a header with a background and when you hover over this header-div, the background zooms in. However, when I use the camelcase notation in the TweenMax vars, it works fine in Mozilla, but messed up in Chrome, and vice-verse. So 'background-size' works fine on chrome but pretty strange in Mozilla. Hope you can help, thanks in advance! rusty

I've been attempting to create what would first appear as a simple parallax-style scrolling page using TweenMax and scrollmagic, however making it work responsively has proved difficult. Essentially, what i'm after is for a page to load with a header image and a h1 title in a 70%/30% split, with the banner position fixed to the top of the page, resizing to 50% window height as the page scrolls and the h1, being pulled up above the header image and fading to 0 opacity. Once the header image hits 50% window height, it should unpin and the rest of the content should scroll up to a negative offset, just overlapping the header image, and then scroll as normal. Difficult to explain textually so the codepen referenced is annotated and should explain things better. I've tried everything I can think of here but after the first scene ends, the pin-spacer's min height adjusts itself for reasons i can't figure out and then won't return to it's previous value on reversing scroll. I suspect aligning the lower header with javascript isn't best but CSS didn't work much better either. Any and all ideas are really appreciated. Thanks

Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before

Hi all, Just trying to build a fancy mobile menu using Greensock. I was wondering what the best way to make the + expand the menu and then the x to close it. Can I change the #mobicon's onClick to onClick="menucloseFunction" with an oncomplete of the menuFunction() ? Also, I had a thought that was to reverse the menuFunction() that I thought would work something like this but the reverse is not the normal colour when i enter it. function menucloseFunction() { menu.reverse() } Thanks for any help, Phil

Hi all, This may not look like a gallery at the moment but i problem there is a method to my madness. Just wondering what the best way to make only the div that is being hovered over animate instead of all of them at once. Thanks, Phil

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!

I'm really new to javascript and TweenMax and I'm not really sure if my question is a javascript or tweenmax question, but happy if somebody can put me on the right track. <a href="#" id="info" class="info" onclick="myFunction()"> <span class="plus"></span> About Me </a> $(document).ready(function(){ $(".begin").on("click",function(){ TweenMax.to("#logo",1,{bottom:1200,opacity:0, ease:Back.easeIn},0.5); TweenMax.to(".hire",0.6,{left:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to(".info",1.3,{right:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("hr",0.4,{bottom:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("#nav-icon1",0.5,{top:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to("#topright",0.5,{left:1000,opacity:0, ease:Back.easeIn},0.2); TweenMax.to(".social",0.5,{left:1000,opacity:0, ease:Back.easeIn},0.2); //Complete this animation before moving into the slider???? $(".sec-A").addClass("showing"); $(".head").hide(); }); $(".down").on("click",function(){ $(".head").addClass("head-hide"); }); $(".home").on("click",function(){ $(".side").removeClass("showing"); }); $(".code-btn").on("click",function(){ $(".sec-B").addClass("showing"); }); $(".back-btn").on("click",function(){ $(".sec-B").removeClass("showing"); }); });

This is just a question about capabilities. I'm animating a site that is using the bezier plugin to move 4 small circles along outside of a single larger circle. I've got the animation working fine, I was just wondering if there was a way to have the plugin recognize the coordinates based on percentages relative to the parent or if this would just be too much of a strain on the browser(i.e. would it just bog the whole deal down because it would have to recalculate the path everytime the browser resized)?

Hi there, Still a newbie to Greensock and noticing how much of a newbie every hour. I was hoping to turn this particle emitter to more of a explosion burst effect like you would see with a firework. After 2 hours of playing i'm not really getting anywhere. Can someone tell me if an emitter is right for this? Thanks, Phil

Hi there, Sorry if this is a stupid question. I am trying to pause a function and only start it when an onComplete happens in TimelineMax. The function works perfectly except that when it plays it is off screen because it is firing as soon as the animation starts. <script> var tl = new TimelineMax () tl .from("#txt1", 1, {right:-280, ease:Power2.easeInOut}, "+=4") .from("#counter", 1, {right:-280, ease:Power2.easeInOut, onComplete: startCounter}) .from("#txt2", 1, {right:-280, ease:Power2.easeInOut}) .from("#logo", 1, {top:250, ease:Power2.easeInOut}) .from("#tag", 1, {right:90, autoAlpha:0, ease:Power2.easeInOut}) var distance = {counter:0}, scoreDisplay = document.getElementById("counter"); function add() { TweenMax.to(distance, 1, {counter:"+=200", roundProps:"counter", onUpdate:updateHandler}); } function updateHandler() { scoreDisplay.innerHTML = distance.counter; } add(); distance.pause() function startCounter() { distance.play() } </script> Thanks for any help, Phil

Hello, I am re-writing some basic code I was working on and adding GSAP. (TweenMax) I used the TweenMax object (function? I'm new at this.) and then attempted to use jquery's .queue to set up a JQuery function on completion. It doesn't work, but I don't know why, and I don't know what my alternatives are. Thank you for your time!

Hello, I've created a page about the Justice League, because I'm an avid comic lover. http://codepen.io/wmufunde/pen/NGxewa I have tested this page on my Chrome browser and none of the animations work at all. However on my codepen, all of my animations save one work. The one that will not work on my codepen is the clip on line 2: TweenMax.to(".info-block", 2, {clip: "rect(50px 50px 50px 50px)"}); TweenMax.from(".pic", 2, {x: 50}); TweenMax.staggerFrom("#logo", 0.5, { opacity: 0, y: 100, rotation: 180, scale: 0.5, delay: 0.5} Does anyone know why my page won't animate? I've linked the GSAP library from the CDN. Have I placed the link in the wrong place, or formatted the link wrong? Also, does anyone know why the image of the entire Justice League team is so blurry? When I tested this on my Chrome browser, outside of codepen it was perfectly fine. Any help would be great.

Hi there, This could be a weird question but is it possible to onComplete:50%. Ideally I would like to trigger some animations when an animation is 10%, 20%, 30%, 40% complete etc. The below code is wrong but i thought i would post it as a talking point. .from("#animation", 20, {left:990, onComplete50%: stopFunction}) What is the best way to do this? Thanks, Phil

For some reason Firefox Stable on Mac Yosemite appears to be somewhat choppy when it comes to the orbs floating animation in the pen shared. Any suggestions for improving that sequence or thoughts on why Firefox is reacting the way it is? My setup is very straight forward: var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut });

I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!

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!

Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.

I'm used to using flash to create an array, but I cant get my head around this. so far I have this working ( I finaly have tweenmax working in wordpress, but thats conversation for another day ) any help would be greatly appreciated ! thanks <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script> jQuery(document).ready(function() { var whorolls = ["#movmystuff1", "#movmystuff2", "#movmystuff3", "#movmystuff4"]; document.getElementById("whorolls").addEventListener('mouseover', btnHandler, false); var rotation = 0; function btnHandler(e) { TweenMax.to("whorolls", 2, { scale: 1.2, ease: Power4.easeOut}); } }); </script>

Hi guys i realized this simple animation width an svg image; the square on the top moves automatically and the one on bottom moves right or left depending on what of the two arrows of the keyboard is pushed. The problem is that i need to stop the moving of the second square when it's in proximity of the margins of the window. How can i do? Thank you in advance. (everything is in the codepen)

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