Jump to content

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

Search the Community

Showing results for tags 'tweenmax'.

  • 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 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
  2. 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
  3. 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
  4. Pusher

    Greensock Menu

    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
  5. Pusher


    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
  6. 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!
  7. 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"); }); });
  8. 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)?
  9. Pusher

    Fireworks WIP

    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
  10. 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
  11. 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!
  12. 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.
  13. 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
  14. 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 });
  15. 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!
  16. 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!
  17. 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.
  18. 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>
  19. 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)
  20. 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
  21. Hi ! It's me again.. Now I am trying to draw a SVG from what a designer gave me. But, I tried something very simple from the video and as you will see in the codepen, nothing happen... I don't know why, can someone help ?
  22. Hi everyone, hope you are fine. I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time. I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point, here is my codepen demo : http://codepen.io/anon/pen/bdXqzw In this example you can see a simple square that change to position fixed with new background-color. The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down. But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it. Thank you in advance for reading my post and maybe help me !
  23. I made a simple animation which works fine on desktop, but when viewed on my iPhone it staggers. It doen't run smoothly and doesn't do all the tweens it should. Can understand why this happens. I only use TweenMax as my external source. Somehow the phone won't accept all of it. Any idea what I can do to get this running smoothly on my phone? Thanks!
  24. Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If I am not in good proportions the animation is broken. But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object ! So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation! Do you have some idea or tips of how I can synchronize tweenmax with a scroll ? I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries. EDIT: here is a codepen I made. http://codepen.io/anon/pen/VLJWrX
  25. Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks