Jump to content
GreenSock

Search the Community

Showing results for tags 'timeline'.

  • 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. 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?
  2. 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}`) })
  3. 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!
  4. 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?
  5. 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
  6. 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.
  7. 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,
  8. 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
  9. 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
  10. 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.
  11. hi guys , what the good way to do this in a timeline ? .from([item1,item2,item3], 1, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') My arrays items are dynamic and never same, and i want to dispatch the random value in properties for each items in the array ? what the best way to proceed and for keep a good readable structure in the timeline. I can maybe do something like this , but it kind weird ! and ugly code. tl.call(() => { items.forEach(it => {tl.from(it, 0.2, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') }) },null,null,'#item') If you have some suggest, i take it
  12. With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip
  13. Am trying experiment fake physic correlation with math random and bouncing tween. But am not realy satisfying from the result . Do existe some codePen example where poeple emulate fake physic bouncing on ground with timeLine ? I can not get a dynamic result that will more naturally lead to the percussion of the ground. this is how i approche the timeline animation for now. const tl = new TimelineLite({paused:true}); const speed = 1; //? need sync with spine2d need study? if(items){ const ih = 75; // constante items height from size : help math performance tl.addLabel('#itemFocus', 0 ) // start item move and focus to source .addLabel( '#HitItem', 0.6 ) // source hit items and project to target .addLabel( '#TargetHitItem', 0.7 ) // target Hit by items .addLabel( '#ItemFall', 1 ) // items start falling .addLabel( '#ItemHitGround', 2 ) // items hits grounds and bouncing tl.call(() => { source.s.state.setAnimation(1, "atk2", false) }) .to(items.map(it => it.position), 0.5, {x:'+=150', y:(i,it)=>`-=${100+ih*i}`, ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.5, {x:'+=1', y:'+=1', ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.3, {x:1, y:1, ease: Back.easeOut.config(4) }) .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,2,2), ease: Back.easeOut.config(1.4) },'#itemFocus') //HitItem .to(items.map(it => it.position), 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) },'#HitItem' ) .to(items.map(it => it.scale), 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },'#TargetHitItem' ) .to(items.map(it => it.position), 1, {x:(i,it)=>`-=${ih*i}`, y:`-=${target.p.height}`, ease: Expo.easeOut },'#TargetHitItem+=0.1' ) .to(items.map(it => it.scale), 1, {x:1 ,y:1, ease: Expo.easeIn },'#ItemFall' ) .to(items.map(it => it.position), 1, {y:target.p.y, ease: Expo.easeIn },'#ItemFall' ) // fall down // bouncing ground items.forEach(it => { const rx = Math.randomFrom(-20,50); tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut } ,'#ItemHitGround' ) // items hit gound and start fake Physic .to(it.position, 0.6, {y:target.p.y, ease: Bounce.easeOut },'#ItemHitGround+=0.3' ) // Y .to(it.position, 0.6, {x:`+=${rx*0.6}`,ease: Power2.easeInOut },'#ItemHitGround+=0.3' ) // X }); The physic bouncing start at label `#ItemHitGround`. Maybe i do something wrong with math ? note: am not using any physics engine in my projet, i just want simulate fake physic with easing when i need. thanks
  14. Hello , Im new to GreenSock fourm . the question is I have a target using Timeline in forloop and the target's position changed to where the first loop started . I want it to be the same position to go . How can i fix it ? Any help would be appreciated . thanks ! let tl = new TimelineLite() for (let i = 0; i < this.restoreInnerStone.length; i++) { tl.from(".stoneDestination", 1, { left: this.restoreInnerStone[i].xx, top: this.restoreInnerStone[i].yy, });
  15. I've prepared animations for two objects in js, how should i set up the TimeLine so that it executes flipCards() function after let's say 2 seconds from window load? Additionaly it would be nice if I could adjust delays between animations of each object.
  16. Hello everyone. It's my first post here and i really like this library. Before talking just note that i'm french and I'll probaly do somme grammar faults. So, my problem is that I've created a Timeline and then paused it (You can look the Codepen). Then i've created a SetTimeOut to play it after 2s. When the Timeline play after the pause, the H1 and H2 won't work. Then if we remove the pause and the settimeout, the H1 and H2 animation will work. I've worked on it for few hours and it's driving me crazy. I didn't found any post related to this so i'm asking you a little hand for me! ? (you maybe need to go to CodePen to scroll and see the h1 and h2 ;).
  17. Ok. This one is killing me. I've spent two days on it already. I think I just need to know more about nested timelines and labels. But here it is: -When the mouse pointer enters the "Hover Button" I'd like the playhead to play until 50% of the animation has completed, then stop. -If the mouse pointer leaves the "Hover Button" before the playhead reaches 50%, then the playhead should reverse, heading back towards the start of the timeline. -If the mouse pointer leaves the "Hover Button" after the playhead has reached 50%, the the playhead should reverse back to the 50% position, NOT all the way back to the start of the timeline. This much so far I've got, although I used two separate timelines back to back with a number of "if" statements using the progress() method to accomplish this. I'm sure there is a more elegant solution using only one timeline, I just can't seem to find it at the moment. The problems come when the timeline reaches 100%. -After the playhead reaches 100%, I need everything to reset back to it's initial state on load. So, in other words, after the playhead reaches 100%, it should snap back to the very start of the timeline and all of the above described behavior should repeat itself all over again. This is whats giving me trouble. I have tried using pause(0), seek(0), time(0). None of those seem to be resetting things without adding extra unwanted stuff to the hover behavior. By the way, when I say timeline here I am referring to the red line on the codepen demo. Not either of the two separate back to back timelines I used to get what I've got so far. Any ideas? This one is frying my brain. Lol. Thanks for any help! Here is the codepen:
  18. Hi! I have two videos on the timeline: After some seconds of the playing of the second video, it calls dispose() of the first one. But the dispose free the memory from the first one so fast that the play of the second video gives a small "bottleneck" in playback at the time of the dispose(). A "bottleneck" of half a second, but ideally it would not "bottleneck" anything and the playback would be 100% fluid. Is there a way of the dispose() free the memory more slowly? Thanks a lot.
  19. I'm creating a landing page and using GSAP to animate some text according the the user's scroll position. How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?
  20. Hello, I was trying to make a hover function with GSAP with timelinemax. In this, there are lists of elements which on hover will take up an x position and moves back to original position on mouse out. But, here, when I move the cursor in between lists items, the animation doesn't stop, but instead, it waits for the previous one to finish. Traditionally in jQuery, this is achieved through stop() method. What can we do here? and how do we do it? Thanks
  21. Good evening, I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? any advice appreciate. thank you.
  22. Hi, so I'm currently trying to make the dashed trail rotate around the globe clockwise. However I keep getting an error saying that the tl, or "trail" has not been defined even though it looks like it is. Any help is greatly appreciated, thanks.
  23. Hi guys, So I've only done pretty basic stuff with GSAP at the minute but i've been set the task of building something similar to menu section on this link. http://www.johos.at The scroll timeline thing with changing background / text I just want to know if it's possible to build something similar using Scroll Magic and GSAP? I don't fancy investing a couple of days trying to do it to find out it's not possible.
  24. Hi I'm fairly new to greensock, and I'm loving it. I'm making a 3D timeline(or track) that I'm moving eggs forward and backward when scrolling. I've used perspective to get the '3D' effect. But, I've run into problems, getting the egg to 'fall off'/disappear when it reaches the end. I want to make the whole egg disappear/re-appear when it reaches the end, not portions of it as it moves out of the view-box. Is there some cool way greensock can help me do this? Here's the link to the codepen Any comments would be appreciated.
×