Search the Community
Showing results for tags 'TimelineMax'.
-
I've created a bunch of divs that contain circle background images on my site. I've set them up to expand/contract on hover/mouseleave. The hover expand works great, but I can't get the transform origin to change. Maybe it's because they are absolutely positioned (which I can't change), but they all seem to expand from different starting points. The ones above expand from the top and the ones below from the bottom. Is there any way to get them all to expand from the center?
-
Hi, I am pretty new to GreenSock, so i might ask a silly question. Problem is I create a variable like: var tl = new TimelineMax({paused:true, repeat: -1}); and i set the tl.from(element, 1, {opacity: 1}); element's original css opacity is 0 and i will play it in some onClick function. Problem is my element original opacity is 0, and before I trigger Click event, the above code would already set my element opacity to 1. This is not what i want. What I want is that the element's opacity is 0, when I play the TimelineMax, i would play a tween to make my element from opacity:1 to opacity: 0 Here is my codepen: http://codepen.io/DanielYKPan/pen/wMyLMZ Hope someone could give me a hint, thanks....
-
Hi, I’m having problems re-initialising the properties of a Timeline (Codepen url attached) On start, the plane should animate in form the left (-300) This only seems to work on the initial playthru. i've looked at Clearprops, invalidate() and a few other ideas, but nothing seems to fix it so far. Any suggestions welcome Thanks
-
Hi all. I have a problem with pausing a point of TimeLineMax. I have an animation queue like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addLabel("mystart") .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... The problem is when I want to reverse timeline from "mystop" to "mystart". I do it easily by : if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); But this animation when will be run that condition above is true. Actually, the animation will be run from mystart to at the beginning point of the timeline when the condition is true. I want to run the animation once, only. So I have to kill that: if(//for example: scrollTo<=500) tm1.tweenFromTo("mystop", "mystart"); tm1.kill(null, ".circle-f"); But it kills all animation of ".circle-f" on other conditions that I don't want to happen it. The question is is there any way by other condition I can turn off the kill or return the animation has been killed. And there is a way to make me don't use of kill? I tried with addPause but I couldn't understand when I use it like this: var tl= new TimelineMax({paused:true}); var tm1=tl.set(".circle-f:nth-child(7)", {autoAlpha:0,scale:0,backgroundColor:'#00E5FF'}) .addPause() .to(".circle-f:nth-child(7)", 0.3, {autoAlpha:1,scale:0.2,backgroundColor:'#00E5FF'}) .addLabel("mystop") .to(".circle-f:nth-child(7)", 0.3, {scale:1,backgroundColor:'transparent'}) .... How can I call it when I am calling its playing? Like this? tm1.play(); tm1.addPause("mystop"); Please let me know and help me if it's possible.
-
Hey guys, I built a few webpages and was using tweenmax to animate some stuff. I recently bought a license so I could use morphsvg and I am loading those in to that local site and it's working great. Here's what I am loading. <!-- Modernizr (feature detection) --> <script src="js/modernizr.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!--TweenMax--> <script src="js/tweenmax.js"></script> <!--MorphSVG plugin--> <script src="js/plugins/morphsvgplugin.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- My scripts --> <script src="js/scripts.js"></script> Now we are moving the site to wordpress and so I am having to enqueue the files into wordpress. We were enqueue-ing greensock through the cdn originally and it worked great. Now that I have switched it to local js files it is broken, saying Tweenmax is undefined. I suspect something is wrong with what I am loading, or the order I am loading it in, but I can't seem to figure it out. Is there anything special I should do for wordpress? Here's my enqueue loading order. wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true ); wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true ); wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12'); wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1'); wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0'); wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0'); wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' ); wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );
-
Hi all, I'm pretty new to GSAP so apologies if I've missed something obvious. What I'm trying to achieve is the ability to change the delay on a staggerTo tween, as part of a timeline. var embiggen = function(selector, delay) { var elements = $( selector ); var t1 = new TimelineMax(); t1.pause(); t1.staggerTo( elements, .5, {scale: 2}, delay); return t1; } // create the animation with 0.25s delay between each one var squares = embiggen( '.square', 0.25 ); // start when the app is ready squares.play(); // What I would like to do is... squares.addDelay(1); squares.restart(); // this would play, but with a 1 second delay rather than 0.25s delay I have the above code in the codepen link. There is an obvious bug where "addDelay" doesn't work. I appreciate I'd have to reference the staggerTo specific parts of the timeline but the gist is, let's say in some situations I want to unveil elements slowly, but then maybe later do the same unveil but all together, or faster or whatever. It's a conceptual idea at this point. I appreciate I could just run the "embiggen" function a second time, and then just reference the animation I needed - I am just wondering if there's a method for this rather than having two timelines saved in variables which could potentially take up more memory? To clarify, it's not necessarily the speed of the whole thing I want to slow down, the timeline tweens themselves would be the same. It's simply the delay between the squares, whether, say, they want to run all together, or staggered. Thanks!
-
Hi, just wondering if anyone can suggest / advise how this site can be done? When click on the menu it because a task manager view kind. Looks cool. http://www.vangardemusic.com/
-
I've written a script that addpause()'s on click. When I reinitialize the timeline the pause skips the animation. As far as I understand I should use remove() to take out the pauses. I don't know what the addpause adds to the timeline or if I'm even able to remove it. Any ideas would be much appreciated, thank you!
-
Hi there, Is there a basic way to calculate the length of a TimelineMax animation? I do alot of banner work with Greensock and publishers have strict 15sec limits. I can't find an example anywhere. Thanks, Phil
-
Hi guys, I have a timeline that animates between two classes. It works like a charm with the styling I've used so far, but it can't animate `scale3d`... Do you guys know if this is a known bug, or is there a known workaround? EDIT: I used Gulp with an automatic venderprefix, but I tried to add the vendor-prefixes manually and that worked.
-
I have a banner that runs a quick GSAP driven animation as well as a JS based countdown timer. //edited to include link http://codepen.io/anon/pen/XXddLq GSAP code var tl1 = new TimelineMax (); tl1.from("#myAdHero", 1, {ease:Sine.easeInOut, autoAlpha:0, delay: 1}) .from("#myAdLogo", 1, {ease:Power3.easeInOut, autoAlpha:0, delay: .25}) .from("#timer", 1, {ease:Sine.easeInOut, autoAlpha:0}) .from("#myAdCTA", 1, {ease:Power3.easeInOut, autoAlpha:0}) .from("#myAdBar", 1, {left: "-300", ease:Power1.easeInOut}) .from("#myAdTxt1", .5, {ease:Power2.easeIn, autoAlpha:0}) .to("#myAdTxt1", .5, {autoAlpha:0}, "+=3") .from("#myAdTxt2", .5, {ease:Power2.easeIn, autoAlpha:0}) }()) When the countdown reaches a specified date the timer would just no longer remain visible. This is the code in that makes the timer <div> disappear ( I didn't include all of the code because I didn't think it was necessary) if (time[1] <= 0) { clearInterval(interval_id); document.getElementById('timer').style.display = 'none'; } Everything works great at this point but now, what I need to do, is move my button over and revise the copy with a different message. All of my lines of copy are in my sprite sheet. So, I was wondering, if I created an alternate timeline, could I use the above if/then to run it in place of the TL1 timeline and if so, how would I go about doing it? I'm really not well versed in JS.
-
So I'm using scrollmagic for an infographic, and I have a smooth scroll plugin that I was trying to use that hasn't been updated in a while (last used in January), but TweenMax has! The script is throwing all sorts of errors and completely breaking the animation. I'm getting the error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': 2 arguments required, but only 0 present." Anyone know how to update this script? It's at the bottom of the js on my codepen.
-
Hi, i have seven timelines each inside a function. created in the same way as shown in the 'GSAP JS Banner Example' six contain content and a seventh to control them all. i can get one timeline to activate (works when i use each of the 6 content timelines) but when i use the .add property to append another timeline at the end of the first. i get nothing surely this has a simple solution. i have tried to replicate the 'GSAP JS Banner Example' as diligently as i can but it just wont work for me. can someone take a look at the code on my codepen link please thanks
-
I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
-
I'm trying to get my flicker animation to start after the opacity part of the tl tween. Problem is I can't just append it to the end, because I've got more tl tweens running while the flicker animation is happening. As you can see in the tween, it doesn't look like my function is firing at all. Any ideas? Codepen updated: http://codepen.io/kathryncrawford/pen/YyoyLz
-
I'm trying to create a flicker effect (eventually intended for some christmas light images) that will flicker the light off and on on repeat, and with a yoyo effect so there isn't a jump between opacity:1 and opacity:0 when the tween repeats. Right now, nothing is happening in my codepen and I'm not really sure where I went wrong!
-
How can I make this work? I want to pause, clear/reset my TimelineMax from this onclick function call. I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console. Is what I'm trying to do correct or possible? <div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div> </div> An abbreviatated JS version of the init02() function has this: function init02(){ var tl2 = new TimelineMax(); tl2.to... } Thank you for your time and help.
-
I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top. I tried a couple of things to make this happen, but without any luck. - Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a <g id="bars"></g>) - Tried to animate the points of the polygon (http://greensock.com/forums/topic/8565-animating-svg-polygon-points-using-attrplugin/) I hope someone can help me with this. This is the end result what I need to create > http://postimg.org/image/pg2drnvch/
-
When I'm animating along a bezier curve, the object being animated slows down towards the end of the curve - you can see this very clearly in the attached Codepen which draws a series of dot along the curve to visualize it. The dots are more tightly clustered towards the end of the curve. Is there any way of changing this? I've tried changing the timeResolution but it doesn't fix this.
-
GSAP Bezier Curve ViewerI've been working with bezier plugin quite a bit recently and made a tool to help visualize the curves as creating them blind is no fun! At its heart it's just this function, which should work to visualize any tween (uses jQuery): let visualizeTweenMaxBezier = (tween, steps) => { for (let i = 0; i < steps; i++){ tween.progress(i/steps); $("body").append("<div id='point" + i + "'></div>"); $("#point"+i).css({ position: "absolute", width: "2px", height: "2px", "background-color": "#7F7F7F", top: tween.target.css("top"), left: tween.target.css("left"), }); } tween.restart(); } Currently it generates code based on screen pixel values, if people are finding it useful though I might update it to generate code based on screen percentage, or percentage positions within the containing element. Happy coding!
- 4 replies
-
- 1
-
-
- bezierplugin
- tweenmax
- (and 5 more)
-
Hi All, Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). Situation: I have an infographic where animated elements are controlled by a timeline slider. That part works fine. What I need to do now is have two text items update using the same slider. For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M) The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. Thanks in advance for any help / pointers / codepen examples! tome
-
Hi! I'm curious if there's a good way to manage changing durations. I don't have code snippet handy atm, but the situation is this: We have a series of animations/scene. There's the intro timeline, the waiting timeline, and the outro timeline. It's a loader scene. The intro and outro are their own var'd new TimeLineMax(), with a series of tweens. These animations have static duration, e.g. the intro takes one second, and the outro takes 2 or whatnot. The waiting timeline is a repeating series of .to()'s saved into a var'd timeline. The total time is variable based on bandwidth and filesize. I'd like to alter the duration the containing tweens (independently if possible), as the total wait time increases; Speeding up the repeating effect (reducing the duration) the longer we're waiting. I can navigate an onComplete that checks some bool and restart()'s that timeline to "get" a repeating animation without using repeat explicitly. Related: is there an API for timeline.repeateUntilFurtherNotice()? I didn't see one (https://www.greensock.com/asdocs/com/greensock/TimelineMax.html#methodSummary). Either way - what is a good approach for modding the duration of tweens inside a timeline when the total duration is variable/unknown?
-
Dynamic Doubleclick: objects revert after "from" tween?
amplitrix posted a topic in Banner Animation
Hi there, long-time lurker, first-time poster. I have an obnoxiously complex set of dynamic banners (content pulled in through a feed) where there are dozens of different static elements that can be called depending on one of the variables passed into the feed. I'm using TimelineMax to animate them. There are 2 timelines running simultaneously: one with foreground content, and a background animation. The elements being tweened on each timeline are mutually exclusive and the timing doesn't relate. They should both start on load and play independently. The whole thing is MUCH more complex than this but I've simplified it down to the gist of the structure. Everything works perfectly ~8 times out of 10 while hosted on Doubleclick (Chrome, Firefox, Safari tested on Mac all similar results), and every time locally. It's just every once in a while the elements on the "animationTL" will suddenly revert back to opacity:0 after they've tweened in. The whole "mainTLready" and "animationTLready" thing is also a workaround for a different issue I was encountering. If I just let each timeline play immediately, sometimes, when hooked up to the dynamic feed, it would hang up and nothing would animate at all. So this seems to correct that problem, but I couldn't replicate the issue on my end so I'm not 100% sure. function init(){ graphicsAnimation(); //build mainTL: uses .to, .from, .staggerFrom, .add mainTLready=true; playBanner(); } function graphicsAnimation(){ //build animationTL (inside switch statement cases): .set, .from only. //Most of these animate x/y and opacity. ".set"s are declaring scale, top & left values. animationTLready=true; playBanner(); } function playBanner(){ if(mainTLready&&animationTLready){ document.getElementById('content').style.visibility = "visible"; mainTL.play(); animationTL.play(); } } TL;DR "from" tweened elements revert after tweening back to their pre-tween state. Works locally, breaks ~20% of the time loaded on Doubleclick with text and images pulled from dynamic feed. So um, any ideas? Let me know if you need more info. Thank you! -
Hi there, I have a banner that loops 3 times: var tl = new TimelineMax({repeat:3}); tl.append( TweenLite.from($(".text1"), 0.5, {alpha:0})); tl.append( TweenLite.to($(".text1"), 0.5, {alpha:0}),"+=2.5"); tl.append( TweenLite.from($(".text2"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".text2"), 0.5, {alpha:0}),"+=2.5" ); tl.append( TweenLite.from($(".tele"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".tele"), 0.5, {alpha:0}),"+=2" ); tl.append( TweenLite.from($(".endframe_logos"), 0.5, {alpha:0}) ); tl.append( TweenLite.to($(".endframe_logos"), 0.5, {alpha:0}),"+=4" ); After it's finished the 3 loops, I don't want the last Tween to fire. instead stopping at the 2nd from last line Is this possible using a label or some such? Thanks
-
Hi If you've read this thread you know I've been trying to animate SVG masks. From what I gather, this is only possible by manipulating the SVG attributes directly, not with CSS transforms – which makes it easy for things like a circle's radius, but less so for rotation. Here's how I've attempted to do it (you can check the linked codepen): tl.staggerTo(el, 1, { cycle:{attr:function(){ var a = {cx:0, cy: 0}; a.cx = Math.cos((tl.progress() - 0.5) * 2 * Math.Pi) * 20; a.cy = Math.sin((tl.progress() - 0.5) * 2 * Math.Pi) * 20; return a; }}, ease: Linear.easeNone }) The goal is to change the cx and cy attributes over time so that the SVG element moves along a circle. There are two problems: using cycle and attr in conjunction doesn't seem to work? The function returns an object that should look like {cx:..., cy:...} but it's not interpreted correctly. I suspect I'm doing something really wrong here that has to do with not knowing javascript enough... here I'm trying to use tl.progress() to calculate cx and cy depending on the animation's progress, but this approach doesn't work; the progress is always 0 when accessed within the timeline itself I think, since the calculations are made prior to it running. How could I make it update properly? Using an onUpdate function, maybe? Cheers
