Search the Community

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?

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}`) })

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!

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?

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

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.

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,

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

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

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.

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

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

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, });

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.

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 ;).

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:

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?

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

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.

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.

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.

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.

Greetings, I'm new at GreenSock ( first project ) and as you may guess, I do have some struggles, I want to group the tweens in the timeline, rather than going individually, first two goes at the same time and then the second two and so on... I really try to figure out by myself, I add a minus delay but it's not working properly with ScrollMagic or I can't make it work. Here is my code: let controllerPerspectiveFirst = new ScrollMagic.Controller(); perspectiveTimeline = new TimelineMax(); perspectiveTimeline .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut } ) .from( '#as-perspective-bg--mountain--02', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--01', .4, { autoAlpha: 0, scaleY: 0, scaleX: 0, ease: Power4.easeOut } ) .to( '#as-perspective-bg--mountain--02', .4, { width: '180vw', scaleY: .6, scaleX: .6, ease: Power4.easeOut } ) .from( '#as-perspective-bg--desert', .4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut } ); Thanks much.

Demo: https://codesandbox.io/s/n34pvjxyxj Hi, fellow GSAP'ers! The topic of playing a timeline in reverse keeps troubling me. The Demo above is one, where, within Vue, a parent component calls function on a child component (using $refs). As the console output shows, the functions are indeed called, but the animation is not played in reverse. I do not understand why, because: - the timeline is returned to a var, right? - the staggered animations use `staggerFromTo` , even though I assume that using any of the other two should eventually work, too What am I doing wrong here (again)? Do I misunderstand the idea of having the timeline saved to a variable (here: animateLogo)? Are reverse animation on timeline using a stagger feature not possible? (I doubt that! It's GreenSock!) Thanks you in advance! PS: the actual GSAP-related code parts are kept as short as possible. Please ignore the other stuff, which is just there to wrap the letters... (no, I am still not using SplitText... shame on me!)

Hi, I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated. What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more. Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!