Search the Community
Showing results for tags 'TweenMax'.
-
I have used GSAP for a few years now, after being introduced to it through college. I am a big fan and want to use it for animating a sequence in my portfolio site. I am testing a simple concept to see if I can make a much more complex sequence What I am trying to do is change an image at a specific point in the Timeline sequence - essentially changing the "src" path of the image. I have spent an hour or two now scouring the forums and searching online for a solution, and the only seemingly related issues are much more complex. I am aware of the possibility of using jQuery and the "attr" , however ideally I would like to keep it as simple as possible, and believe there should be a way to simply change the source of the image as a 'src' css property. I have tried it without the CSS Plugin, as well as spelling out the word. I have also ran a check on the image source to make sure it isn't a file-path issue. Here is the code as of now: <body> <img src="images/7.gif" id="seven"> </body> <script> var seven = document.querySelector("#seven"); var tl = new TimelineMax({delay: 2, repeat: 2, repeatDelay: 2}); window.onload = function() { tl.from(seven, 0.5, {autoAlpha: 0.5, x: +100}) .to(seven, 0.1, {y: + 100, x: + 300}) .to(seven, 0.4, {css:{src: "images/7777777.png"}}); var pathSource = String(seven.src); console.log(pathSource); } </script>
-
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 -
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 });
-
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 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
-
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 -
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! 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!
-
Hi there, I have just realised that Greensock can do counting! I am making a counter that needs to arrive at a phone number but is meant to look like a bomb timer. Does anybody know how to make the counter... Start from 0 000 000 000 and count up. And possibly put some : in between the groups of numbers. Thanks for any help, Phil
-
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
-
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'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.
-
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.
-
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!
-
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)
