Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tween'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hello, It's my first time posting here, so apology if it's not done correctly. I have a problem. I have a game where I interpolate, via TweenLite, the position of a sprite. I interpolate the position of its box2D body to be precise. Even though the tweening in itself works fine, once I kill the tween, it puts back my object at its initial position and I can't figure out why. I am sure it's something stupid, like a param to pass, but can't find it in the doc. Maybe there are issues when tweening with box2D ? Thanks for your help. Code: var fromX = ((BALL_SIZE * BALL_SCALE) / SCALE) var toX = ((STAGE_WIDTH - (BALL_SIZE * BALL_SCALE)) / SCALE) g_tween = TweenLite.fromTo(g_ball.sprite.body.GetPosition(), 3.0, {x:fromX}, {x:toX, ease:Linear.easeNone, onComplete:onTweenComplete, onReverseComplete:onReverseComplete}); function onTweenComplete() { g_tween.reverse() } function onReverseComplete() { g_tween.play() } // *********** // Callback when user click on the screen // The game release the ball if it hasn't been released yet // *********** function onMouseDown(event) { //var newBall = new Ball() //g_sprites.push(newBall) var x = g_ball.sprite.body.GetPosition().x console.log("x: " + x) g_tween.kill() g_ball.sprite.body.GetPosition().x = x console.log("g_ball.sprite.body.GetPosition().x: " + g_ball.sprite.body.GetPosition().x) g_world.SetGravity(new box2d.b2Vec2(0, 30)) }
  2. Hi I would like to tween a <div> with a 25px border so that it shrinks in from the right. I know when animating I should really use the scaleX property, but this shrinks the vertical borders of the div. The obvious work around in terms of keeping the border thickness uniform is to use the width property, but I can't set a transformOrigin on the width property, so I've used a hack and basically increased the right: px; value to counter this. Here is the codepen to illustrate this: http://codepen.io/pauljohnknight/pen/qagBWY Is there a more efficient solution to this i.e. how to reduce a div in size on its x-axis so it reduces in from the righthand side, without affecting the border thickness? My main concern with doing it this way is the janking / flickering in the animation when integrated into the site it will be on. P.S the pen is linked to a scrollMagic scene, so you will need to scroll to see the effect. Thanks in advance for any help / ideas Paul
  3. Hi all I'm encountering some jittery animation on chrome while animating the scale of a div using TweenMax (as well as other tween engines). In the codepen, the div with the image is encapsulated inside other divs in order to reproduce the conditions of the project I'm working on. I also put a css animation counterpart that doesn't have that jittery effect. I'm wondering why it is only happening with js tweening engines... I'm only seeing it on chrome (win & mac), it works nice on ff and safari (haven't tried edge yet). Except on ff mac, I get the jittery effect when i'm hovering the div. Do you also have that problem ? Is there a workaround ? I tried the "z" attribute and also put a translate3d on the parent. Thanks. Thomas.
  4. I am wondering if Greensock is able to tween an API from a different library? I am using Framer.js with my mobile work but using the GSAP animation library. In Framer you can tween the x value (relative), or the screenFrame x value (absolute value). I have attached an image for the API. https://framerjs.com/docs/#layer.layer (under screenFrame) The screenFrame API: element.screenFrame = { x: 400 }; Instead of tweening the x value which is relative, I am trying to tween the screen frame absolute value. TweenMax.to(element, 1, {x: 0}); TweenMax.to(element, 1, {screenFrame:{x: 0}}); <-- It is not working? It is because my JS/GSAP syntax isn't correct?
  5. Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
  6. Saw this website http://www.invstr.com that uses Greensock. I was wondering how the background ticks(grey rectangles) were in a animated loop that when they past the viewport they automatically started at the top again... could that be achieved somehow with modifiers plugin like the carousel wrap example? Thanks
  7. Hi there, What I want to do is have a tween that moves 250px right, has a Power3.easeIn and a Back.easeOut. I can animate the Power3.easeIn fine but how to do get the Back.easeOut. at the end of this movement?? Power3.easeIn line of code: TweenMax.to( $( '.mybox' ), 2, { right: 250, ease:Power3.easeIn}, 2); Im sure its not too hard but I cant seem to work it out. Thanks in advance.
  8. Let's say we have a tween animation already added to a TimelineMax instance. The Timeline is looping (infinite repeat) but while watching it loop I want the user to have the option to check out some other ease options. Is there a way to dynamically add/replace the ease values to an existing, running tween? Or would I need to completely replace what's there?
  9. Hi, Having a standard bootstrap progress bar — is it possible to actually tween it's value. i see over complicated things online, but not a simple progress bar without alternations. Hence the question. <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow="0" aria-valuemin="90" aria-valuemax="100" style="width: 90%"> <span class="sr-only">90% </span> </div> </div> So how would I simply animate it's value? Any tip is greatly appreciated. My apologies if this is already covered, however I couldn't find the answer for this simple example. Thank you for your help.
  10. valiz22

    Rotating Words

    Hello, I am trying to reproduce the banner section from this website: https://www.triprebel.com/. In the codepen file (http://codepen.io/valiz22/pen/rerwxL) I have what I succeeded so far. Could anybody help me? Thank you!
  11. 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?
  12. 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
  13. 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.
  14. 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
  15. 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
  16. 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
  17. 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?
  18. 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)
  19. 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
  20. 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.
  21. 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!
  22. 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.
  23. 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?
  24. Hi. I'm starting to use this incredible code to have some ads in my page. The issue I'm having is that some banners are located in the middle of the page, so when the user get to that part the animation has already ended. To fix this I'd like to know: - how to start the animation when the <div> section of the banner becomes visible. - If is possible to loop a serie of tweens without timelinelite. Thanks!
  25. 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
×