Jump to content
GreenSock

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

Search the Community

Showing results for tags 'timeline'.



More search options

  • 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

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 344 results

  1. Hi, Currently I'm in the midst of a project that requires me to show videos sequentially during certain times within certain days of the week. I bumped into this library and it's gorgeous timeline. However whenever I set the duration of a tween (video) on an onStart callback to zero an inconvenient gap of it original duration persists. Is there any way around this problem? Thanks in advance!
  2. Checkout the codepen. If you use the buttons to set timeline progress(), you can go back and forth between 0 and 0.5 no problem, but as soon as you go to 1, you can't get back to 0. I've experimented with other values as well, and everything seems to work until you go to 1 for the first time. After that, when you try and return to 0 it reevaluates to 1. Does this look like a bug, or do I have my logic wrong? Thanks!
  3. I'm pretty sure I was able to set negative progress in gsap2, but it doesn't seem to be working in gsap3. Any thoughts?
  4. Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.
  5. 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!
  6. Hello, I need to set my react state inside my timeline after first animation ends and then continue with animations: const tl = gsap.timeline(); tl.to(pTitle, 1.5, { x: -550 }).setNewState after previous animation.to(pTitle,1.5,{x:150}) so far I could achive it with that: tl.to(pTitle, 1.5, { x: -550 }).add( setTimeout(() => { //setNewState }, 1500) ).to(pTitle, 1.5, { x: "-4%" }); is this proper way of implementing this? Or is there "smoother" way of achieving it like with delayedCall() - which is not available in timeline
  7. GreenSock

    TimelineLite

    Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 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. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
  8. Hi there! I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work. So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again. Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out. When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete. You get the idea I hope. I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore. Am I just totally missing a point or am I making things difficult for myself? I would love to hear your ideas! ~ David
  9. What best way to make complexe text callBack (story) inside a time line ? currently this not work fine ! plz see : function txt0() { line:6 https://codepen.io/djmisterjon/pen/BaarKLL if you look console, it should show 0,1,2 ! but it seem buggy here. Are you able to show some versions on how to use that kind of stuff correctly ? I need a clean way because it a very complex system events managers.
  10. Hello everybody, i just had a little inconvenience occuring to me, when i wanted to animate a Sizmek Deluxe Banner (inside of their Template) using TimeLine Light and Tween Light. The code is read properly, console log is also working, no compiler errors and so on. just ... the animation wont play. I have contacted their support that is pretty good but unfortunately they also couldn't come up with a solution. Did anybody have a same experience or has an idea about how to fix that (i also tried not to use timeline but only TweenLite in its stead, but no response whatsoever)? Thanks in advance and best regards Felix 01_DeluxeBanner_2.0.0.zip
  11. Hi guys, I'm trying to give a color for each path. my issues is the color of the first path is applied to all the rest! thanks very much. site to see the animation: www.mwmtest.com/bio JS: // Signs Anim // var tlBio = new TimelineMax({ repeat: -1, delay: 3, repeatDelay: 0.2, yoyo: true }), earth = document.getElementById('earth'); tlBio.to(earth, 2, { morphSVG: '#fire' }, '+=1').to(earth, 2, { morphSVG: '#water' }, '+=1').to(earth, 2, { morphSVG: '#space' }, '+=1').to(earth, 2, { morphSVG: '#wind' }, '+=1'); CSS: #earth { fill: pink !important; } #fire { fill: yellow !important; visibility: hidden; } #water { fill: blue !important; visibility: hidden; } #wind { fill: green !important; visibility: hidden; } #space { fill: red !important; visibility: hidden; }
  12. Hi, guys. I needed to create animation like this (in principle): 1. animate rectangle in few steps (=in timeline) 2. when finished, run animation BACKWARDS - 2x faster. But this part is only small part of complex timeline. I tried to achieve this effect by .reverse() method - in two ways: 1) First, I put .add(t2) followed by .add(t2.reverse()) into one timeline. I found out that .add(t2.reverse()) overwrite previous .add(t2) - if I understand this behavior well. However I didn't get what I wanted. This example is represented by blue square in CodePen. 2) So I tried another way - I used onComplete parameter where I called this.reverse(). I didn't expect to get the result that I got. When onComplete is called, red square jumps to initial state without any animation. I'm little bit confused because when I use only one timeline - without calling timeline in timeline as in example - everything works well. Can anybody please tell me what I did wrong and show me better approach? Thank you very much in advance. Karpec
  13. Hi, I'm working with timelines, and after certain steps, it sometimes makes sense to add / remove elements from the DOM. Something like this: tl.to('.element', 1, { /*params to change*/}) tl.to('.element', .5, { /*params to change*/, onComplete: () => //figure out if i need to add some elements and then add them }) tl.to('.newElements', 1, { /*params to change*/}) I was facing problems for a while where nodes I added ('.newElements' above) wouldn't animate. Eventually I tried adding those elements before the animation started, with an opacity of 0, and then just animating them in at the appropriate time afterwards. This fixed the issue. Is this the appropriate way of doing things, or can I in-fact add elements during onComplete callbacks, mid-timeline, and then animate on those newly added elements? And if I must have elements in the DOM before starting an animation / timeline that will eventually use them, what are the ramifications of this for nested timelines? I've been working on breaking up some of my animations into smaller pieces, that can then be reused and hacked together in different ways (see this post). Some of those discreet actions, inherently require DOM manipulation. So for example if I want to update a chart with new data, I may need to add some elements first. So lets say I have a updateData function that: checks the DOM for what is and isn't there adds new elements if there isn't already an element in the DOM for each of the data points that needs to be represented updates elements that already exist but whose data has changed removes elements that are no longer needed. This function in the end, returns a timeline. Could I then nest this timeline inside another timeline like so..? //tl is a timeline to update all charts at once tl.add(updateChart1()) tl.add(updateChart2()) tl.add(updateChart3()) ...Where each updateChart# returns a timeline that also had code adding and removing elements.
  14. Hi, I'm curious about the performance penalties (if any) of how I'm abstracting out some of my animations into discreet timelines. Consider the following: Fig 1 //timeline setup plus some animations before this part tl.to(['.group1', '.group2', '.group3'], 1, {autoAlpha: 0}) // some animations after this part The above would be a part of a larger timelined animation. I have many animations, triggered under different events, that operate on common constituent elements (ex: group1 elements, group2 elements, group3 elements). Across these animations, many of the things I need to do with these elements and/or groups of elements are repetitive, so I was thinking to abstract out an API of sorts (basically a bunch of organized discreet timeline functions). So for example, my code structure for a given element / group of elements that would need to commonly be operated on might look like this: fig2 Example Folder Structure: -animations ---parts -----group1 //animations group1 has to do alot -------enter //animations for bringing group1 in ---------fadeIn.tsx ---------fadeAndFlyInStaggered.tsx ---------aMoreComplexTimleinedAnimation.tsx -------update ---------wiggle.tsx ---------jiggle.tsx -------exit ---------fadeOut.tsx -----group2 -----group3 The same pattern (enter/update/exit) would be there for each group, and each tsx file exports a function that returns a timeline. The benefit of this being that then I can have a higher level animation timeline that isn't so long, and easier to read. Perhaps something like: fig3 tl.add(parts.group1.enter.fadeIn(...params)); tl.add(parts.group2.enter.fadeInStaggered(...params)); tl.add(parts.group1.update.reflectNewData(...params)); // maybe more stuff depending on complexity This makes my life way easier, prevents repetitive code, makes code more maintainable / readable, and allows me to isolate implementation details from the larger high-level orchestration of the animation. If I was doing purely GSAP stuff it may not have been so bad, but often times I need to set classes, change classes, get positions of things, add remove elements, etc. All that takes up space and makes things harder to read / maintain. So I really like the idea of timeline abstraction. I am however new to it. As I go about working on the abstraction defined above, I started thinking there could be some trade-offs. Consider Fig4 below, against Fig1 above. fig4 tl.add(parts.group1.exit.fadeOut(), 'timeToLeave') //fadeOut transitions to autoAlpha = 0 and removes the element(s) if a flag is set to true tl.add(parts.group2.exit.fadeOut(), 'timeToLeave') tl.add(parts.group3.exit.fadeOut(), 'timeToLeave') Where as before this was a single tl.to ..., now I have three seperate timeline.add(anotherTimeline) lines, that I have to coordinate start times with ('timeToLeave' marker in fig4). My question is: Question: Is there a performance penalty for doing things the fig4 way vs fig1? Or is this something that GSAP optimizes for?
  15. Hi! I am trying to transform or build this css animation into a GSAP timeline because with CSS is consuming too much CPU. The #bar-- is a g element of an svg that contains 80 bars @for $i from 80 through 1 { #wave-g__top--#{80 - $i} { animation-name: barOpacity; animation-iteration-count: infinite; animation-duration: 5s; animation-delay: $i * 0.065 + 0.25s; } } @keyframes barOpacity { from { opacity: 1; } to { opacity: 0.2; } } This is animation I am getting with CSS https://i.gyazo.com/fec064c25c2456ce2c3e34e932a5607e.mp4 and I thought this could be the similar in GSAP but is just not working, I am very new with this actually. const bars = document.querySelectorAll('#wave-g__top g') let tl = new TimelineMax({ repeat: -1 }) bars.forEach((b, index) => { const delay = index * 0.065 + 0.25 tl.to(b, 0.1, { opacity: 0.2 }, `-=${delay}`) })
  16. Hi Guys, I'm trying to animate this hamburger menu. The hover works but only once and the click doesn't work so it's not a pretty picture Basically on click I need to draw #x_right and #x_left to 100% to form the X to close the menu and draw all the rest of the paths to 0% What am I doing wrong? Thank you!
  17. Hi! In the codepen example - I have a slideshow with a small function called "animateSlide" that just maked the h1 tag red. At the moment it's happening very slow eventhough I've set it to one second. Any ideas why?
  18. GreenSock

    GSDevTools

    Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment Requirements GSDevTools requires TweenMax (well, actually just CSSPlugin, TweenLite, TimelineLite, AttrPlugin which are all included in TweenMax) version 1.20.3 or higher. It also uses Draggable under the hood, but in order to minimize hassle for end users, Draggable is included inside the GSDevTools file itself. How do I get it? GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. FAQ Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway. Why isn't GSDevTools in the CDN or Github repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy. Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture. What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.
  19. Hi! Im building a site with Vue/Nuxt and in one of the components I have an expand effect that reveal some person info below a photo of a person. The persons are inside a loop, so it will output like 4-5 persons on the page. At the moment the timeline I have setup with GSAP works - but it affect ALL the persons at once (it reveal each persons content when the timeline is activated). I want it to only show the current persons info. Just wondering how I play/reverse the same timeline on multiple elements? Attaching some pictures of the Vue loop and the timeline with GSAP. Thank you
  20. Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
  21. Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail. I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing? Thanks,
  22. I'm trying to create a Navbar with animations that are controlled by GSAP Timelines and managed by React state. Most of it works great, but I run into a problem when elements in my nav bar are selected in these two orders: ONE, SEVEN, SIX SEVEN, ONE, SIX So two subheadings in a order and then anything else. It seems as if, when we reverse the second timeline, it also plays the first timeline along with it. This leads to the navbar staying open or expanded rather than closed with both timelines reversed. Not sure why this happens? However, when checking to see what Timeline fires (by naming the .data property), it appears that the correct timeline is being triggered. Please see my code sandbox here: https://codesandbox.io/embed/gatsby-starter-default-xvbk9
  23. Hi I heave animated banners template list create using timelinelite. I want to select some banners as preview and edit text then add to timelinelite after that play all selected banners how can i do that. please help Thank you
  24. hi guys, the guy in this video say it give the interactive demo to play and understand the timeline https://greensock.com/position-parameter but i cant found the link ? and the demo on page are not interactive and i cant edit the code ! I'm afraid to look a little idiot but someone could provide me the link from this demo, because that's guy does not give a solution about the issue from 6:40 So i need the demo to try understand how solve this issue i also get in my engine , thanks and sorry if is a misunderstand from my English.
Ă—