Jump to content
GreenSock

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. 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.
  2. 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?
  3. 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.
  4. 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!
  5. 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?
  6. 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
  7. 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.
  8. 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
  9. 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
  10. 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?
  11. 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
  12. 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)
  13. 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
  14. 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.
  15. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. The latest version of GSAP delivers some fun new features that open up entirely new animation possibilities. Check out the videos and demos below that show what's so exciting about 1.18.0. Here's a quick summary: New "cycle" property allows you to add rich variations to staggered animations Relative HSL color tweens (affect just the hue, saturation or lightness) Complex string tweening like "1px 5px rgb(255,0,0)" Numerous improvements and bug fixes (see github) New "cycle" property for staggered animations Have you ever wanted to animate a bunch of elements/targets and alternate between certain values (or even randomize them) in a staggered fashion? The new super-flexible "cycle" property does exactly that. Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended). Demo: array-based and function-based "cycle" values See the Pen Basic staggerTo() using cycle by GreenSock (@GreenSock) on CodePen. Advanced "cycle" effects with SplitText See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen. Caveats The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax. When using function-based values the function will be passed an argument which represents the index of the current tween. Inside the function body, the scope (this) refers to the target of the current tween (see source of first demo above). Relative HSL color animation Have you ever wanted to tween a color to something a little darker or lighter without having to guess at cryptic hex values? How about tween a hue to 180 degrees around the color wheel? With relative HSL tweening, it's easy. You can now use familiar relative prefixes ("+=" and "-=") directly inside hsl() strings! //30% darker backgroundColor:"hsl(+=0, +=0%, -=30%)" //to grayscale (0% saturation) backgroundColor:"hsl(+=0, 0%, +=0%)" //opposite color (180 degrees around the other side of the color wheel) backgroundColor:"hsl(+=180, +=0%, +=0%)" Relative HSL demo See the Pen Relative HSL color tweening in GSAP 1.18.0 by GreenSock (@GreenSock) on CodePen. Caveats Be careful about doing relative tweens when they could be interrupted. For example, if you have a mouseover that creates tween to +=30% and then a mouseout that does -=30% and then the user rolls over/out/over/out, you'll get odd results because of the nature of relativity. For bullet-proof rollover effects with relative values check out the demo we used in the video: Hover Demo with Relative HSL Values When you tween to a saturation of 0%, that basically loses any kind of hue data - the underlying color/hue of grayscale is non-existent. So then if you try tweening back to a saturation of 80% or something, it'll be red because that's the default zero position of hue. For example, tween a blue <div> to "hsl(+=0, 0%, +=0%)" and then to "hsl(+=0, 80%, +=0%)", it'll end up red instead of blue. That's not a bug - it's just the nature of colors in the browser (they end up in the rgb color space). Tween complex string-based values Complex string-based values containing multiple numbers can be animated without any extra plugins. For example, a value like "10px 20px 50px" can be animated to "4px 13px 200px". GSAP will find each number in the strings (in order), compare them and animate the ones that changed. CSSPlugin already does this for CSS values and it even converts units, but the base engine (TweenLite) can now do basic string tweening. It will even find rgba(...) values and make sure to round them appropriately during animation. This new feature extends to AttrPlugin too which means it can animate the complex strings inside SVG element attributes like the points in a <polygon> or <polyline> or even <path> data (please carefully read the caveats below). See the Pen Complex string-based tweening: simple shape morph by GreenSock (@GreenSock) on CodePen. Caveats This feature is NOT intended to perform complex shape morphing in SVG. It simply animates the numbers inside the strings (in order). Robust shape morphing requires dynamically parsing path data and injecting extra points in certain cases. This new complex string-based tweening lays the groundwork in the core to do a lot of advanced effects in the future, especially via plugins. If you're animating the "d" attribute of a <path> element or the "points" attribute of a <polygon> or <polyline> element, keep in mind that you MUST make sure the number (and type) of points match between the starting and ending values. And since those are attributes, use the AttrPlugin (which is already inside TweenMax). Community Demos City Construction by Sarah Drasner See the Pen City Construction Site by Sarah Drasner (@sdras) on CodePen. GreenSock Cycle by Petr Tichy See the Pen GreenSock - staggerTo with cycle by GreenSock (@GreenSock) on CodePen. Special Thanks This major update is extra special as it contains features that were largely shaped by feature requests and feedback from our community. We really appreciate the strong community that we have in our forums that not only helps each other, but also helps shape the tools themselves. Extra special thanks to Elliot Geno for suggesting cycle and relative HSL tweening, Diaco for being a testing powerhouse, and everyone who voted on the API changes. Now go download GSAP 1.18.0 and make something beautiful.
  16. 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.
  17. 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!
  18. 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
  19. 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
  20. 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.
  21. I wonder if there is a way to shake an object in place around its current position. I tried RoughEase and tweening from x,y to x,y with the same value. But the shaking will only be visible when they differ. Is there a simpler way than use an onUpdate callback? Thanks
  22. 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
  23. andyr

    Overwrite tween

    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.
  24. 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?
  25. 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.
×