Jump to content
GreenSock

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

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

Found 23 results

  1. 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 squ
  2. 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
  3. 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
  4. 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!
  5. 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
  6. 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?
  7. 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
  8. 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.
  9. 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
  10. 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
  11. 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 inconsist
  12. 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
  13. 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 c
  14. 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.
  15. 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
  16. 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!
  17. 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
  18. 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 ot
  19. 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
  20. 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!
  21. 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?
  22. 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.insertM
  23. I'm pausing timelines with pause() and resuming them with resume(). However, is as if the timeline is dragged out when it resumes, and labels no longer line up with the tweens contained in the timeline. I've traced most of the properties, and the only ones that seem to be different are duration and totalDuration which are increased by the amount of time spent while the timeline was paused. The startTime does not change. Is this behavior normal? How can I make it so that my tweens and timelines are the right length and the labels line up after pausing and resuming? At the same time, I'
×