Jump to content
Search Community

Search the Community

Showing results for tags 'duration'.

  • 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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello everyone! I'm having trouble understanding and fully controlling my animations with Scrolltrigger and scrub. What I'm trying to achieve is - i want to have two animation elements (.main-title, var points) fired by scrollTrigger with the same trigger point. However I want to animate .main-title once it's finished i want to fire the next animations which are in forEach() .animate-text with paired .country. I think i achieved that in the codepen (please feel free to correct me or show the better/more efficient way). Now i have two problems/questions: I want to have full control of the duration/amount of scroll of each animation (.main-title, each point etc) for example i want to .main-title to be fast then first point to be slow, the next point fast and the last point very slow. (By point I mean each elem in forEach()) Also i have a bug on .main-title that sometimes it does jump up/down - no idea how to tackle this. Every input/tip/better approach to the whole functionality will be much appreciated, thank you guys in advance!
  2. hi, i have looked extensively through the docs and can't find reference to this.... if i create a tween that does not include a duration, like this tl.to("#id", {y: 50, xPercent: 65, opacity: 1}); what is the "default" duration. and before you all tell be it'll be what i set in the defaults: {obj}, can we assume that has not been set either please.
  3. Hello! New here and new to gsap so apologies if I break any rules. I've been staring at this for a while and just might need a new set of eyes. For some reason the paths are drawing super fast. If I change the duration to something like 6000, some move normally, others are suuuuper slow. Could anyone take a look?
  4. I am trying animate a SVG element where the element's position/pose is held for a duration and then snaps immediately to a new position/pose, and so on and so on. I have a working example using SteppedEase, but it feels a bit hacky - as it requires me to use an undocumented 'true' parameter (mentioned in: https://greensock.com/forums/topic/13388-steppedease-to-step-immediately) and duplicate the relevant SVG element's path data from the inline SVG image - with a slight modification (otherwise the duplicated path seems to be ignored). In the codepen example - the Red square should snap to align with the Green triangle as it passes the little blue squares (at 0s, 1s and 2s). When I tried using just steps(1) - it stepped once, but at 50% of the inter-blue-square duration (1s in this example). Whereas I need it to step once at 100% of that duration. So the overall behaviour would be more akin to using a series of Hold durations.
  5. I have a circle which is supposed to be transformed in the direction of the cursor all time. node.addEventListener("mousemove", e => { const {x, y, width, height} = blob.current.getBoundingClientRect(); gsap.timeline() .to(blob.current, { duration: 10, x: e.clientX - (x + width / 2), y: e.clientY - (y + height / 2), force3D: true, overwrite: "auto", ease: Linear.easeNone }, 0) }) This is fine, but includes unwanted behavior: when being further away from the circle and rapidly changing direction and distance from the circle, there obviously will be a change in speed since the distance for the circle to travel in this 10 seconds gets shorter/longer. How can I ensure the same travel speed all the time, no matter where the cursor is?
  6. Hi, I am new to Greensock and I really love it so far! Today I was struggling with setting a random duration on a tween or timeline object. I created a helper function that returned a random value for the duration. In the tween properties I called the function on the duration property. However, the random value only was set once and the function was never called afterwards, although the animation was infinite by setting repeat: -1. I found the property repeatRefresh, but the docs say: What am I doing wrong and how can I set dynamic values for duration or delay for each new repetition of my animation? Thanks for some hints in advance!
  7. Hi ? I'm using one long timeline for various React states, and the plan is to tween quickly to the correct label when my state changes. The problem is I can't figure out how to set a static duration (say, 0.5) for the tween in GSAP 3. Is there a way to do this? Also, I'd like the tween to ignore pauses I've added between each state (w/ tl.addPause()). Is this the expected behavior? Thanks!
  8. You may cancel anytime. You'll simply lose access to updates to the bonus plugins/tools and if you're a Business Green member, your commercial license would expire at that point. You should keep it active as long you are selling/licensing your product to multiple end users. Work Products that you sold in the past do not suddenly fall out of compliance when your membership lapses – you just can't continue to sell products that use GreenSock tools after your membership expires. If you don't want to worry about the license expiring, you can simply get a permanent license. Oh, and we don't add any code into the members-only plugins that would make them suddenly stop working when your membership expires. They'll continue to work.
  9. Hello, I am wondering if there is a nice and simple way to set all tweens duration of a timeline to 0 so it does not animate anything but instead applies the props instantly and other timelines. Essentially go to the end without animation anything. I created a codepen which uses seek to do this sort of thing, would this be the right approach or is there something more elegant?
  10. Hey, When animating an unknown number of elements like so: var timeline = new TimelineMax({repeat:-1}), items = document.querySelectorAll('.item'), startDuration = 20; for(var i = 0; i < items.length; i++) { var myDelay = (i * 0.5); animate(items[i], myDelay); } function animate(item, delay) { var a = TweenMax.to(item, startDuration, { rotationZ:'360', ease:Linear.easeNone, repeat:-1 }); timeline.add(a, delay); } What is the best way to modify the duration/speed of an individual tween? Thanks
  11. Hey guys, long time since I've been here. How can I change the duration of a tween while it is tweening? So I have this: TweenMax.to(".masked", 10, {"background-position": "0px 100%"}); And I want while this is playing, to dynamically increase the duration of it, or lessen it.
  12. lynette

    duration timing

    I would like to know how can I make an animation appear longer? I want it to EG: var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=1.75") .to($line1, 1.5, {opacity:0},"+=0.25") .from($line2, 1.5, {opacity:0}, "+=1.15") .to($line2, 1, {opacity:0}) .from($line3, 4, {opacity:0}, "go-=0.35") .from($line4, 4, {opacity:0}, "go-=0.35") .from($btn, 4, {opacity:0}, "go-=0.35") i changed 4 to 0.5 but then how do I make it appear longer ? What happens as well, I have the gif image loop 3 and the copy text repeat 2. On the last repeat the copy seems to overlap the image. Can anyone help?
  13. Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?
  14. Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help
  15. 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?
  16. I am trying out the gsap animation library. According to the basic docs the syntax for getting a tween up and running is: TweenLite.to( [target object], [duration in seconds], [destination values] ) So I have tried a really simple tween based on jQuery's hover event: $('.contact-item').hover(function(){ TweenLite.to(this,4,{background:'#671B4B'}); },function(){ TweenLite.to(this,4,{background:'#FFFFFF'}); }); Oddly, the background does change to the correct color, but it tweens instantly instead of over the course of 4 seconds as I have specified in the second argument. I did check to make sure the default is seconds not milliseconds. It's in the docs I linked to. I did make sure I am using TweenLite and not TweenMax. I am using jQuery but see no conflicts or errors in the console. Any help is appreciated. I have linked to a codepen I have added the css plugin and it is added to the codepen as well.
  17. Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.
  18. Hi, Is it possible when adding a tween to a timeline, to have its' duration be automatically as long as the time gap until the next tween on the timeline (and the last until the total duration of the entire timeline)? So that if, for example there are 3 tweens at time 0, 7 and 10 each, on a time line with a total duration of 20, the first would have a duration of 7 seconds, the second - 3 seconds, and the last - 10 seconds? and if the second tween is removed - then the duration of the first tween will automatically update to 10 seconds?... If it's relevant, all tween target the same dom element. Thanks! beamish.
  19. Howdy internet, I was wondering if there was a way to set a different duration for the .play() and .reverse() animations. I tried to use a function instead of a value, but according to my console, it's only called once, so that value is stored in memory... Thanks!
  20. Hello.. in the DOC's there is the addPause() method which Carl brought to my attention after reading Carl's answer on this post.. http://forums.greensock.com/topic/8472-right-way-to-put-pause-marker-inside-timeline/?view=findpost&p=33079 it got me thinking to see if there will be some type of mixture of addPause() with a delay / duration.. kind of like a addPauseDelay() method coming in the future? so say in the middle of my timeline, i want to pause the timeline for say 5 seconds and then continue... right now im adding a to() method with an empty {} properties object like this to add a pause with a duration: tl.add( TweenMax($("#element"), 5, {}) ); in the future are we gonna see any time of pause with a delay / duration? thx
  21. I know that I shouldn't be too concerned as this is something I've noticed while testing my app in debug. When I transition to a screen that has video content I've noticed my ui elements repositioning(Feathers/Starling) and figure it's due to the workload being too much for that frame. Haven't looked at scout but know that not loading video prevented it. I could alternatively load the video when the user presses the play button instead and have any delay occur there instead, what I'm interested in though was that the load time of 0.64 is for the first time I load a video, when I try any other it becomes 0.078, this is irrespective of what video I am loading(<15mb mp4 h264). I've had a look at the api and tried various options but had no luck. Am I right to assume there is some sort of initialization for the loader? It seems to be when I tell my loadermax queue to load the first file. Is there a way that I can avoid this delay by doing something with loadermax during my app startup? Again unlikely a major issue as long as it does not scale with file size in release.
  22. Hi Guys, Weird problem. I've got a tweenline: var tweenCurrentPage = new TimelineMax({paused:true, onComplete:testComplete, onReverseComplete:changelogo}); element = '#aw-heading'; tweenCurrentPage.to(element,0.5,{autoAlpha: 1}); This works fine the first time and the effect lasts 0.5 seconds. I then reverse the animation this works fine; it lasts 0.5 seconds I then try and play the animation for a second time... this takes 1 second. and when reversed takes 1 seconds. Every time I do the animation, it takes an additional 0.5 seconds (or whatever this initial effect time was set to) I'd be very grateful for any ideas on how I might solve this problem? If it's any help, I've looked in the TweenMax.js file and this.totalDuration() on line 5422. Is incremented by the 0.5 secs every time. I haven't managed to work back further than this yet. Thanks all!! Tom
  23. Hello everyone. I'm working on some animation that very much depends on the accuracy of delay and duration. And I really would like to know if GSAP guarantees accurate delay and duration time for animation? Is it possible that animation duration can have delays itself, meaning that it will take, for instance, 1.01 seconds to complete instead of 1s: var _duration = 1, _delay = 3; TweenMax.to(item, _duration, {css: { opacity: 1}, delay: _delay}); Thank you so much!
  24. I'm creating Staggers automatically from text lines. Some lines contains more letters than others, so i end up with a different durations. How can i create staggers with the same duration but different number of elements?
  25. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
×
×
  • Create New...