Search the Community
Showing results for tags 'tween'.
-
I have some tex that needs to disappear from right to left (it is getting wiped away by a windscreen wiper) Currently I have it so it fades out but I need it to disappear differently. Here is my current code this.timeline.from(".section1", speed, {opacity: 0}, "-=" + (speed / 2)); this.timeline.to(".section1", speed, {opacity: 0, delay: 2}); How would i do this?
-
Hi, We created a small game, where we tween a very long image (18000px) on the canvas. It has good performance on Chrome with a strong pc. But the tween is vey laggy on standard laptop or Firefox / IE. And I think this is relevant snippet: function init() { canvas = document.getElementById("bg").getContext("2d"); img = new Image(); img.xpos = 0; img.ypos = 0; img.src = "img/bg.jpg"; img.onload = function() { animate(); } $('#trigger').click(function() { TweenMax.to(img, 60, {xpos:-17807, ypos:0, force3D:true, ease:Linear.easeNone}); TweenMax.to($('#egg_container'), 60, {x:-17807, force3D:true, ease:Linear.easeNone}); TweenLite.ticker.addEventListener("tick", animate); }); } function animate() { canvas.drawImage(img, img.xpos, img.ypos); } init() We do something wrong? How can be the tween animation smooth on everywhere. We have BusinessGreen plan, please help! Best regards, Ferenc Krix
-
I've been meaning to learn GreenSock for some time and have been trying to justify the cost of onsite trainer to management for some time since we are getting asked to do more and more banner work. But as a complete newbie to TweenLite, I am wondering if it would be a good solution to a problem we have right now. I am drawing an arc on a canvas and am trying to tween just the endAngle var. Since this isn't an attribute of the canvas itself, but a var within it, I'm not sure if TweenLite is what I am looking for. I've linked to a very quickly thrown together example. Any help would be much appreciated.
-
How do I kill tweens past a certain point in time? So, I have a timeline with a bunch of tweens all starting at random times. I want to remove tweens of certain elements that either start past a certain point in time, say, 5 seconds, or tween beyond that point in time. I know about killTweensOf(), but now how do I killTweensPastTime()? I searched google and these forums but couldn't find anything. Thanks, John
-
I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky. I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse.. This is all happening within a much larger framework, so i'm just copying in the relevant snippet here; self.addScrollListener = function() { $(window).bind('scroll',self.updateTimelineByScrollPosition); } self.current_percent = 0; self.updateTimelineByScrollPosition = function() { var current = $(window).scrollTop(); var max = $(document).height() - $(window).height(); var pos = ( current / max ) * 100; var seek_time = self.time * pos; TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); } self.tweenUpdatePlayhead = function() { self.jplayer_div.jPlayer( "playHead", self.current_percent ); }; Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element. Thanks, Andy
-
Hello, I have 2 sprites I want to tween along a bezier curve and then repeat, but I need the sprites to be staggered. This seems simple enough to create a timeline and add 2 bezier tweens and they will follow the tween. However, I want each sprite to start at different points along the path, i.e the 1st at 0, 2nd at 1/2 along the curve. and then repeat so it looks like they are looping around the bezier. If I add more sprites I want them all to follow the same path, but have them evenly spaced. What's the best way to do this? I have a codepen above (hacked from one of the demos) to show what I have so far. Basically, my question is, is there a way to start a sprite 1/2 way along the same bezier as the 1st? Thanks in advance, Andy
-
Hi everyone, Here is what I'm expecting to happen in the Codepen: 1. Click the "Bezier" button to animate the red box along a bezier path 2. While that is playing, click the "Highlight" button. The bezier tween should stop and the red box should animate up to the top left corner of the green box. 3. Click the "Bezier" button again. The red box should then animate back to it's original starting position and then start on the bezier path again. I thought setting overwrite:"all" would help accomplish this, but I can't get the "Highlight" button to work. If you click the "Highlight" button first then it does move the red box to the correct position, but it doesn't work if you click it second. If you click the "Play Vertical" and "Play Horizontal" buttons, then the red box does box in the appropriate direction. Even if you click them in different orders, so the overwrite appears to be working there? Any suggestions?
-
Hello everybody! Help me understand) I have SVG tween animation consisting of steps 1, 2 and 3 and i have draggable element in container with lock axes. How i can move draggable element on x or y axis and play tween depending on the position of the draggable object? Something like this example but with tween and depending on position) thank you)
-
Hello, As you can see in the reduce test case, if I tween the width of a div from no value to '100vw', the new value is set to '100vw'. var div2 = document.getElementById('div2'); TweenMax.set(div2, {height: '100vw', onComplete:function(){ div2.innerHTML = div2.style.height; // 100vw }}); But if the value was already set in css (with the same unit), then the new one is calculate in px : #div { height: 20vw; } var div = document.getElementById('div'); TweenMax.set(div, {height: '100vw', onComplete:function(){ div.innerHTML = div.style.height; // ex: 1920px }}); Is it by design ? Can I force the value to be set in the wanted unit ? In my real world case, I tween the value this way TweenMax.to('.skill', 1, {height: '4vw', width: '16vw'); I understand the need to use pixel for the tween calcul so I was hoping to be able to do this this way to re-set my value in viewport unit : TweenMax.to('.skill', 1, {height: '4vw', width: '16vw', onComplete: function(){ TweenMax.set('.skill', {height: '4vw', width: '16vw'}); }); But as the test case shows, it doesn't seems to work this way either. Thanks for your time
-
I am a Jquery novice, and would have thought the solution to my problem to be quite simple, however I have tried a million permutations of this code and I can't solve it. I am using Scrollmagic and GSAP, and want to trigger three tweens from the same point, so that they fire one after the other (with a slight overlap). The scenes have duration: 0 so that the user only starts the animation, but does not control its progress. Each tween contains a css transform, to work on the same object (#boxes3d). The effect I am going for is : 1) The boxes start flat, but are exploded into 3D by changing the css perspective value to 850px. 2) The boxes rotate 180 degrees by changing the css transform value. 3) The boxes are collapsed again by reverting to perspective: 50000. [ 4) The animation reverses when the user scrolls back past the trigger.] The complication is that the transform value must also incorporate a dynamic scale value in order to make the absolutely positioned divs inside #boxes3d fit the frame at any screen size. The scale value (and therefore the whole transform) is set dynamically by another Jquery function: scaleDiv() which contains the nested rotate3D() and reverse3D() functions. I think I need to create a timelineMax (or Lite) to queue the tweens, but I am having problems putting dynamic css values into the timeline. I have created a jsfiddle (not a codepen - sorry - I hope that doesn't matter too much) with the tweens/transitions that I want to string together, along with the scaleDiv function that must be incorporated into the second tween. At present they have separate scenes, but I want to put them all into one scene/timeline. Here is the fiddle: http://jsfiddle.net/gbinning/vccxufou/13/. I would really really appreciate some guidance! Thank you v much! Edit: I haven't quite set up the scaleDiv function correctly, you need to slightly resize the window to trigger it.
-
I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!
-
I was curious if there was a way to clone a reference to a tween. Similar to how TimelineMax.add( TweenMax.to("blah",.5,{x:50}) ); can include any sort of tween method in it as an argument and call it at a later date. For example: I want to create a generic method that could clone any reference any type of tween or timeline... kill or somehow pause that tween from the argument... then call a new tween or cloned tween at a later date. Like this: addEvent(element,"mouseover", TweenMax.to(element,.5,{backgroundColor:"red"}); addEvent(element,"mouseout", TweenMax.to(element,.5,{backgroundColor:"grey"}); function addEvent(object, event, tweenObject){ // clone and kill or delay event object.addEventListener(event,function(e){ // trigger new cloned tween on event }); } This is simplified from what I am trying to do... Hopefully I am being clear enough! Assume that we don't know the Tween type or Timeline method we are calling. I'd hate to have a ton of conditional logic that detects what type of tween or which method to call.
-
I'm wondering if it should be possible to tween between two sets of path values with the same number of points. For example, suppose I have an SVG with the following path data: <path id="n" d="M1.00000015,71.269657 L1.00000015,75.5026892 L0.999999988,98.6925107 L1.00000015,120.019657 C0.999999984,121.276249 0.999999984,123.013553 0.999999898,124.044071 L0.999999984,148.012996 L150.002473,148.012989 C150.553392,148.012989 151,147.561778 151,147.00891 L151,0.462184836 150.555247,0.0126430611 150.009303,0.0126430611 L2.79077147,0.0126430611 L0.999999988,0.0126430611 C0.999999988,1.31665305 0.999999984,22.0117224 0.999999984,22.0117224 C0.999999985,23.3740268 0.999999988,24.5196567 0.999999988,25.5836215 L0.999999988,49.3460918 C0.999999988,49.3460918 1.00000015,70.2861365 1.00000015,71.269657 Z"/> And with GSAP I do this: var changedShapeID = theSVG.querySelector('#n'); var changedShapePath = "M1.38388602,72.2082603 C0.973032172,73.2106889 0.958561277,74.8587265 1.35575085,75.8776525 L10.6365755,99.6930029 L1.32038928,121.509149 C0.907211953,122.510356 0.89074975,124.158726 1.28793932,125.179275 L10.568764,149.025648 L179.637832,149.013553 C180.189423,149.013514 180.636576,148.56227 180.636576,148.009402 L180.636576,2.01721499 C180.636576,1.46267711 180.179902,1.01313533 179.641046,1.01313533 L10.6365755,1.01313533 C10.5753064,0.379674194 1.38388602,22.8687273 1.38388602,22.8687273 C0.973032172,23.8711559 0.958561277,25.5191935 1.35575085,26.5381195 L10.6365755,50.3465841 L1.38388602,72.2082603 Z"; TweenMax.to(changedShapeID, 0.75, {attr: {'d': changedShapePath}}); I get the shape snapping to the new path shape, rather than tweening to it. As a GSAP beginner I'm unsure whether this is: 1. expected behaviour and I need to use another tool alongside GSAP (such as Snap)? 2. an error between keyboard and chair, in that I'm just doing something wrong? Can anyone point me in the right direction?
-
Hi, I have a very simple application where I want to tween the `backgroundAlpha` of a VBox using TweenLite. I'm using the following code: TweenLite.to(box1, 2, {backgroundAlpha:0.4}); But when I try to run my movie, I get the following error: Property backgroundAlpha not found on mx.containers.VBox and there is no default value. I'm guessing it is because backgroundAlpha is set using `setStyle` not directly... so that is causing the issue? So how do you do it in TweenLite or TweenMax to set it? Thanks for your replies.. San -
Hi, I am trying to create a parabolic trajectory for a movieclip: - I know the starting X and Y - I know the ending X and Y - X movement is linear... - ...that combined with Y must generate a parabolic trajectory simulating the movieclip "jumping" on the 2D plane from Y to Y How can I achieve this effect with GSAP? Thanks
-
Is it possible for GSAP to do what I think. Because my idea is to let the Timeline go to a specific child (tweens inside/added to a timeline) and when that tween is finished animating, it will pause. Here's the code sample: HTML <div class="book"> <div class="last page"></div> <div class="page one"></div> ... <div class="cover page"></div> </div> <div id="prevPage"></div> <div id="nextPage"></div> JAVASCRIPT var book_timeline = new TimelineMax({ paused: true }) /* tween children */ .to('.page.cover', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.one', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.two', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }) .to('.page.last', 0.4, { rotationY:'-180deg', transformOrigin:'0 0' }); $('#nextPage').click(function(){ // code that animates only one (next page) tween inside a timeline then pause book_timeline.play(); }); $('#prevPage').click(function(){ book_timeline.reverse(); }); I want to use GSAP to make my own book flipping div's -
I have one question, I'm trying to make Ajax call with some tween animation on successes. tl = new TimelineMax(); tl.to(".content", 2, {top:"-100%"} ) .to(".content", 2, {top:"0%"}) after first tl.to(".content", 2, {top:"-100%"} ) i want to do $("content").html(data) but it puts data right away i tried delay i tried callback all the same. Any workaround? I tryed reading docs and still i didn't get it.
-
I've got a box in the middle of the screen: .box {width: 20em;height; 20em;z-index: 10000;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);background-color: #fff;box-shadow: 4px 4px 80px #000}; When I resize the browser window, the box stays centered. However, when I add a tweenMax.from, to slide the box from a corner of the screen. var tl = new TimelineMax(); tween = TweenMax.from('.box', 2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0}); tl.add(tween); The animation is fine, but when I shrink the browser window, the box doesn't stay centered. Instead, the box just remains in the same position. Any ideas? Thanks
-
var tl = new TimelineLite({paused:true}); tl.add(TweenLite.from('.ng_dialog', 0.2, {top: 0, left: 0, opacity: 0, scaleX: 0, scaleY: 0, onReverseComplete: hide})); How do you update/overwrite "top" and "left". I've tried various things from the docs, but no joy. OR, add those two properties. .set()? Thanks.
-
Hi Guys, I try to set a boolean value in the TimelineMax.set() method, like this: tl.set(toAnimate, { y: 50, visible:"true", // also tried visible:true alpha: 1 }) But this gives me a NaN value of the visible property of my toAnimate object. But neither visible:"true" nor visible:true are working. The solution using a callback seems for me a bit over sized (see here http://greensock.com/forums/topic/2456-tweening-boolean-value/) Is this the only solution?
-
Hi, I am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ Here I see the play, pause reverse all the stuffs for tweenlite. So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite. When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. So, kindly help me, whether am doing the right thing or not.
-
While using Greensock, I realized that an object can't be tweened more than 2 times. I haven't tested the parameters of this, but I think that once I do a TweenMax.to tween, I can't tween that object anymore. It does not give me an error, but the tween simply does not happen. An example of the TweenMax.to tween that I use is TweenMax.to(object,1,{alpha:0}); and I'm trying to create a TweenMax.from tween like this TweenMax.from(object,1,{alpha:0}); Is there a way to TweenMax.from tween that object again, and if so, how? EDIT: OK I just tested, and that is what happens. The object no longer tweens whenever I use a TweenMax.to tween on it.
-
Hello, I'm kind of new to Greensock (and Flash in general), so sorry if it's a stupid mistake. I'm trying to create a textbox (like in games). I fumbled around with the code until it runs properly. However, once I move onto the third frame, the Output panel gives me an error. Error: Cannot tween a null object. Duration: 0.3, data: undefined at com.greensock::TweenLite() at com.greensock::TweenMax() at com.greensock::TweenMax$/to() at textbox_fla::MainTimeline/myKeyDown() TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock::TweenMax/render() at com.greensock.core::SimpleTimeline/render() at com.greensock.core::Animation$/_updateRoot() This is strange, since the function "myKeyDown" is in frame 1. I do not understand why Greensock would throw me an error, since the function is not a functionality of Greensock (it's just a regular AS3 code) . Anyways, here is the code on frame 1. import com.greensock.*; import flash.events.KeyboardEvent; stop(); TweenMax.from(instruc,1,{alpha:0}); TweenMax.from(char1,0.3,{x:"-400"}); TweenMax.from(box, 0.5, {x:"-100", alpha:0}); textbox.visible = false; TweenMax.delayedCall(0.5, myFunctionL); function myFunctionL():void{ textbox.visible = true; TweenMax.from(textbox, 0.3, {x:"-10", alpha:0}); } stage.addEventListener(KeyboardEvent.KEY_DOWN, myKeyDown); function myKeyDown(e:KeyboardEvent):void{ if(e.keyCode == 32){ TweenMax.to(textbox,0.3,{x:"10",alpha:0}); TweenMax.to(char1,0.3,{x:"-400"}); TweenMax.delayedCall(0.3,frame); function frame():void{ nextFrame(); } } }
-
Hi, For the purpose of distilling this problem to its principal components, let's say I have 2 object that are side by side, say at y=100 pixels. I want both of those to fall down the screen, but to different destination y locations. I want them both to accelerate (easeIn), at the same speed, even though their distance to tween is different. Also I want to cap their final velocity, so they never fall faster than pixels/sec. Here is an illustration: (initial position) Sprite1 Sprite2 (fromX = 0, fromY = 0) (fromX = 100, fromY = 0) (toX = 0, toY = 200) (toX = 100, toY = 400) (falling --> Sprite 1 and Sprite 2 have the EXACT same Y location as falling, since they are using the same custom easing IN function to control their acceleration and final velocity) (falling) .. .. .. Sprite1 has stopped here) Sprite1 (x=0, y=200) Sprite2 (is at the exact same Y locations because they are following the same easing IN function, regardless of total distance to travel (Sprite2 continues to fall until it reaches it target location of y=400) Sprite2 (x = 100, y = 400) Thanks, --Kestal -
I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3. something like this from your documentation but in javascript. TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}}); Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question? TweenLite.to(div, 1.5, {width:anotherdiv.width}); thanks -ross
