Jump to content

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

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Wow, this title must make sense. Hopefully the Codepen helps making this clear. So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?
  2. What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait. PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above. mounted() { this.timeline = gsap.timeline() }, methods() { throwBait(e) { let vue = this; this.animation = this.timeline .fromTo( [this.lure, this.bait], 1.3, { css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY - 200, scaleY: 0, scaleX: 0, visibility: "hidden" } }, { ease: "elastic.inOut(1, 0.75)", css: { left: e.pageX - 25, // 25: Half of lure's width top: e.pageY, scaleY: 1, scaleX: 1, visibility: "visible" } }, 0 ) .fromTo( this.wave, 2, { y: "-5", width: "0px", height: "0px", border: "1px solid white", opacity: 1 }, { y: "-=5", ease: "Linear.easeNone", width: "50px", height: "10px", border: ".1px solid white", visibility: "visible", repeat: 2, opacity: 0 }, 1 ) .to( this.lure, 1, { y: "-=5px", ease: "Linear.easeNone", yoyo: true, repeat: 6 }, 0 ) .to( this.lure, 1, { y: 20, ease: "power4.out" }, 6 ) .to( this.lure, 0.5, { y: -100, ease: "power4.in", opacity: 0, scale: 0 }, 6.5 ) .then(x => vue.reset()); }, reset() { this.timeline = gsap.timeline(); this.timeline.time(0); }, }
  3. I have read various posts on here, some old, and some more recent, about animations being glitchy in Firefox. I have done my absolute best to obtain as much information as I can prior to posting this, in addition to creating the attached Codepen. For some reason, I cannot get my animation to play smoothly in Firefox. To keep things simple, this is all the information I have (and have learned/tried): Issue only occurs in Firefox on Mac OS (smooth as silk in Firefox on Windows) Not my graphics card as a) it is a top spec 2019 Macbook Pro, and b) my designer has the same issue on his Mac I have tried the rotation fix I have tried force3D I have tried using low res images The more effects that I add, the worse it gets i.e. autoAlpha, Rotation, filter etc... Additional information: I am using GSAP 2.1.3 as haven't had the time to upgrade (after I post this, I will attempt to create the same animation with the latest version in a separate codepen) It does seem as if there is a minor memory leak of some sort in either GSAP or Firefox because my fan goes mad when I have the codepen tab open and on screen I have wondered whether it is to do with the retina display as I had a similar issue with my fan in the past with this plugin that was caused by the retina display Can anyone suggest what may be causing this?
  4. I am having trouble getting this to behave. I have an animation that is occurring inside of an element that is also being animated (or changed). The issue is that when the outer element changes size, all of the values for the inner animation are not adjusting to the new size. In the codepen you can see this by clicking the start button and then either resize the output window or click the enlarge button to enlarge the outer div. How do you solve this. How do you tell the tween to pay attention to the values if that change? Thanks.
  5. I'm doing an animation to show an order summary, I want first expand the width and then the height to create a fancy effect but seems that height is being seated wrong because in the end of the animation it has an extra height not desired. Help! Both tweens works well individually but the problem is when I put them together. Expected: Current:
  6. 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!
  7. 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!
  8. 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?
  9. 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.
  10. 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!
  11. 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
  12. 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
  13. 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.
  14. 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; }
  15. 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
  16. 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
  17. 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.
  18. 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?
  19. 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}`) })
  20. 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!
  21. 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?
  22. 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
  23. 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.
  24. 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,
  25. 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