Search the Community

Hi everyone, First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next. So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which I want to then have the card dissapear (that's working) and then the text to zoom back in to its original position. Does someone mind explaining where my lack of understanding is coming in sorry. Cheers. Simon EDIT: THIS CODE BELOW HAS NOW BEEN UPDATED IN THE SANDBOX LINK PROVIDED IN MY REPLY. const tl = useRef(); // this handles my aboutMe text showing up or not (working) const [showText, setShowText] = useState(false) // this handles my profile photo moving (working) const [animation, setAnimation] = useState(null) // this handles my firstname/lastname/whoButton moving (not-working) const [textAnimation, setTextAnimation] = useState(tl.current = new TimelineLite({ paused: true })) // this goes with the code above (not-working) const [toggle, setToggle] = useState(false); // getting the references of the objects I want to move const profImg = useRef(null); const nameTextFirst = useRef(null); const nameTextSecond = useRef(null); const whoButton = useRef(null); useEffect(() => { // this animation is working setAnimation( TweenMax.to(profImg.current, 1, {y: '20%'}).pause() ) // this animation is not setTextAnimation( tl.current .to(nameTextFirst.current, 0.5, {x: '200%'}) .to(nameTextSecond.current, 0.5, {x: '200%', delay: -0.3}) .to(whoButton.current, 0.5, {x: '200%', delay: -0.15}) ) }, []) function hideAboutMeText() { setShowText(false) animation.reverse() //not working below textAnimation.reverse() } function showAboutMe() { animation.play() //not working below textAnimation.play() // working below setTimeout(() => { setShowText(true) }, 1000); } // not working useEffect(() => { tl.current.reversed(!tl.current.reversed()); }, [toggle]); // not working const toggleTimeline = () => { setToggle(!toggle); };

Hello! I have a big slider with animations, and it gives a lot of load on the PC P.S. I apologize for the text with errors - I am writing through transliteration (my language is Russian) Question No. 1: How is it in those slides that are not visible to pause the animation, and run only for 4 seconds? Question No. 2: How to put a stop on the entire animation with media <768, and start a new one with media> 768? And is it possible to set the conditions for the media in the animation (I want to make it beautiful on mobile devices .. now we hide it)

Hello everyone, First time using this, so please excuse my terminology. I'm doing a THREE.js animation loop, where a bunch of textGeometries animate forming a box, sphere and cone. I'm using two timelines since I don't want the first transition(from initial state to forming a box) to repeat. So when restarting the second timeline on `onComplete`, it isn't doing a smooth transition. I'm unable to track down what's causing this, could anybody please help me figure out why the restart isn't smooth? Below is the logic, followed by a codepen demo: for (i = 0; i < MAX_PARTICLES; i++) { var initialMorphTL = new TimelineLite(); var morphTL = new TimelineLite({onComplete:function(){this.restart()}}); const child = children[i]; initialMorphTL.to(child.position, 1, { ease: Elastic.easeOut.config( 0.1, .3), x: pointsInsideBox[ index ++ ], y: pointsInsideBox[ index ++ ], z: pointsInsideBox[ index ++ ], delay: .1 }).to(child.material.color, 1, { ease: Linear.easeNone, r: boxColor.r, g: boxColor.g, b: boxColor.b, }, "-=1"); morphTL.to(child.position, 1, { ease: Elastic.easeOut.config( 0.1, .3), x: pointsInsideSphere[ index ++ ], y: pointsInsideSphere[ index ++ ], z: pointsInsideSphere[ index ++ ], delay: 5 }).to(child.material.color, 1, { ease: Linear.easeNone, r: sphereColor.r, g: sphereColor.g, b: sphereColor.b, }, "-=1").to(child.position, 1, { ease: Elastic.easeOut.config( 0.1, .3), x: pointsInsideCone[ index ++ ], y: pointsInsideCone[ index ++ ], z: pointsInsideCone[ index ++ ], delay: 5 }).to(child.material.color, 1, { ease: Linear.easeNone, r: coneColor.r, g: coneColor.g, b: coneColor.b, }, "-=1").to(child.position, 1, { ease: Elastic.easeOut.config( 0.1, .3), x: pointsInsideBox[ index ++ ], y: pointsInsideBox[ index ++ ], z: pointsInsideBox[ index ++ ], delay: 5 }).to(child.material.color, 1, { ease: Linear.easeNone, r: boxColor.r, g: boxColor.g, b: boxColor.b, }, "-=1"); }

Hi, I created this animation and tried to import it to my website. https://codepen.io/Philastan/pen/VwLRMwx Surprisingly i only got the first part of my animation working and after some fiddling I got the same result in Codepen, while there are basically the same libraries loaded. https://codepen.io/Philastan/pen/eYNLZYX After reading in the documentary I ended up trying to use tl = gsap.timeline({ paused:true }); instead of the timelineLight - but still: Same issue. It seems like Gsap gets stuck at the Morphing Part. I am happy about any kind of help! Phil

Hey there, I have a Timelinelite instance where I running both "single shot" and "repeating" animations, however, I'd like the "timeline.totalDuration()" to not include repeat. My goal from the below is to get a total duration of 1.5sec , that is duration without repeat. Is there a method I can use to get that? Thanks. const timeline = new Timelinelite({paused: true}); timeline //Animation A ( 1 second duration) .to('#box',{x: 0,duration: 1 }, 0) //Animation B ( 0.5 second duration) .fromTo('#box',{x: currentX - 2},{x:currentX + 2,duration: 0.5, repeat: -1}, 0.5);

Hello Guys, I've been looking around the internet and this forum for some time and I could not find a fix whatsoever. I am currently working on my finals project and I've come across this white-space problem which seems to only occur on mobile devices. (In my case: iPhone 11) I included a codepen (https://codepen.io/benvi/pen/KKwbzON) on which you can see the problem yourself. On a PC or Laptop, there will be no whitespace on the right side, however if you inspect this codepen on your mobile device you will notice while the animation hasn't finished playing, you can scroll all the way to the right like 1000px or something and as soon as all the elements that came in animated are finished with their animation, the whitespace somehow magically disappears and you can no longer swipe to the right. I am not quite sure how this affects a mobile device but not a pc or laptop. I am fairly new to GSAP and I am sorry if this has already been answered somewhere. Could you possibly teach me to properly position elements off the screen (to animate them in later) without causing excessive amounts of whitespace? Thank you guys!

I'm trying to get proper control of these balloons, and I'm close, but not. quite. there yet. The green one is for reference, and demonstrates that gsap's default behavior is to use "left top" as the origin. The red one is the one whose attributes I'm tweaking, trying to accomplish this one, surprisingly-challenging goal: start horizontally centered, then animate till it's scaled 2x and centered on the crosshairs. Questions I have about the attached pen: Why doesn't the red balloon start already-centered? Why does the red balloon end up slightly below-left of the crosshairs? (I put a subtle box around the red balloon to make this easier to see.) What can I do to resolve these 2 issues before moving on to learning to animate these suckers along a curve?? ?

I am trying to animat a div, but the console throw and error. "TimelineLite is not defined" and I can't seem to understand where the problem comes from. Here are snippets of my html and js code. I tried with TimelineMax as well, same result. ? Help will be highly appreciated!

am experimenting with timeLine Exist a way to add a simple instance with callback but without target ? const actiontl = new TimelineLite(); actiontl.to(items, 0.2, {x:'+=140',y:'-=140', ease: Power4.easeOut },'#step1') .to(items.map(i => i.scale), 0.3, {x:0.8,y:0.8, ease: Elastic.easeOut.config(1, 0.3) },'#step1') .to(items, 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) } ) .to(null, 0, { onStart: () => { target.s.state.setAnimation(1, "hit1", false) } } ) //FIXME NO WORK ! .from(items.map(i => i.scale), 0.3, {x:2,y:2, ease: Power4.easeOut } ,'#hit') .from(items, 0.3, {rotation:4, ease: Power4.easeOut } ,'#hit') .to(items, 1, {x:'-=100' ,y:'-=150', ease: Expo.easeOut },'#hit' ) .to(items, 0.6, {x:'-=15' ,y:target.p.y, ease: Bounce.easeOut } ) So example here : .to(null, 0, { onStart: () => { target.s.state.setAnimation(1, "hit1", false) } } ) i found more readable to split my event from animation, but i get "Cannot tween a null target."; So if i understand we can no work like this , i need to add the event callback onStart in a valide timeline with target ? Or existe a way to use a empty timeline with only a event ? thanks

The update to 2.1.x started throwing errors in several spots in my project so I rolled back until I could get a chance to debug what was different. I finally worked out what the problem is: you can no longer change a class on the HTML element as part of a timeline. This seems to be a change in CSSPlugin.js that pushes every call to the set() function in TimelineLite through the "_getMatrix" function. That function performs a trick when the element isn't visible by appending the element to the DOM. Unfortunately, if the target is the HTML element that causes a "DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent" error. Line 1366 ends up trying to append the HTML element to the HTML element. I can see that v.2.0.2 didn't call "_getMatrix" at all on set() and definitely not for a simple class addition or removal. Here's an example that will break every time: const waitContainer = $('.waiting_container'); const waitEnd_tl = new TimelineLite() .to(waitContainer, 0.2, {opacity: 0, ease: 'easeOut'}) .set($('html'), {className: '-=waiting'}); If you run the CodePen in debug view, you'll get the error after 2 seconds.

Hi guys, my TimelineLite animation in React JS stops after switching to another window tab. Is there a solution to prevent that? I saw one older topic https://greensock.com/forums/topic/11831-solved-tweenlite-animation-stops-when-window-lost-focus/ , but as it was in question TweenLite and I am using TimelineLite this is not a solution to my problem. I haven't seen any similar property like TweenLite.ticker for TimelineLite. Can somebody help?

Hi. first time to post here. I wondered how to start specific elements' animation at same time in Timelinelite with starggerFrom methods? Let's say I have 5 elements and I want to make 2nd and 3rd animation start at the same time. Is there any settings I can use in staggerFrom?

I am working on some concentric circles that should rotate infinitely, until a user clicks on one of them, in which case it should stop the animated rotation and be draggable (rotation). Then, if a different circle is clicked, the new one should stop it's animation, but the previous one should start up again from the position where the user left it after dragging, but with it's original direction and speed. I have managed to get the pausing/unpausing behavior working correctly, except for the fact that if the user drags a band a lot (say, rotating it around fully 2 or 3 times in the same direction), when the animation restarts, it's either going the wrong speed, or the wrong direction, or both. The animation is this: export const bandRotation = (element, rotateDir, rotateSpeed) => { const rotateDeg = rotateDir === "right" ? 360 : -360; const tl = new TimelineLite(); tl.to(element, rotateSpeed, { transformOrigin: "50% 50%", rotation: rotateDeg, repeat: -1, ease: Linear.easeNone }); return tl; }; I've tried a couple different ways of stopping and starting it: if (this.props.paused) { this.state.rotation.kill(); } else { this.setState({ rotation: bandRotation(this.band, this.props.direction, this.props.speed) }); } and: if (this.props.paused) { this.state.rotation.pause(); } else { this.state.rotation.invalidate(); this.state.rotation.restart(); } both of which I would think would restart the animation normally, but again, it's either going the wrong speed, wrong direction, or both. What can I do to ensure the animation restarts with the same speed and direction, no matter how the user drags the circle/band while the animation is paused?

Hi guys, I am pretty new to GreenSock but desperately trying to learn more and use it as my main animation toolset. So far I am absolutely loving it. I am kinda stuck on the TimeLineLite portion of Petr's course on ihatetomatoes. I am trying to add tweens to a timeline but as soon as i add the variable tl it stops working. Please check out my code and help me figure out where I am going wrong. I am sure it is super obvious to someone more experienced but I just can't seem to figure it out. thanks in advance, appreciated!

Hi, I'm developing an website and I'm trying to separate a big animation into smaller timelines, but I'm getting a strange behavior when using tl.add(). I recreated it on Codepen in a simpler manner than in my website. On Codepen I have 3 boxes, each with it's own TimelineLite instance, and then I have the variable tl, and I added the first 2 timelines in it. What happens is: If I try to play the tl timeline, with the first two boxes, nothing happens. If I try to play the tl1 and/or tl2 timelines separately, is jumps around or start tweening near the end of the timeline. If I try to play the tl timeline after playing tl1 and tl2, it works fine. The third box wasn't added to the tl timeline to use as reference of an animation playing without problems if not added to another timeline. What am I doing wrong? It's probably a silly error I'm missing, but I can't seem to understand why this is happening.

I have a timeline with couple of tweens in it. Some of those tweens get destroyed by TweenLite.killTweensOf(myNode) while the timeline is playing but after removing those tweens, the position of the next tweens don't change and the timeline act like nothing has been changed. I expect when I remove a tween from timeline, then any tween after that shifts and start earlier. Is it even possible to do what I want to do?

i am using gsap basic animation like translations and show or hide but the animation sometime do not go smoothly i don't know if i can post my demo website link but if anyone want to see the web i can comment on this post chars = mySplitText.chars; tl.staggerFrom(chars,0.01, {opacity:0, ease: Expo.easeInOut}, 0.11, "+=0.1"); tl.to(skip,1,{display: 'block',ease: Expo.easeIn},2); tl.to(bodycontent,1,{display:'block'},9); tl.to(textHolder,1,{display:'none',ease: Expo.easeIn},9); tl.to(txt,.1,{display:'none',ease: Expo.easeIn},9) tl.to(showafter, 2, {y:-7000,rotation:45,scale:4,ease: Expo.easeIn},9); tl.to(showafter1, 2, {y:7000,rotation:45,scale:4,ease: Expo.easeIn},9); tl.to(showafter, 2, {opacity:0,display:'none',ease: Expo.easeIn},10); tl.to(showafter1, 2, {opacity:0,display:'none',ease: Expo.easeIn},10); tl.to(body, 1, {overflowY:'auto',ease: Expo.easeIn},10); tl.to(welcome,2,{display: 'block',opacity:1,ease: Expo.easeIn},10); tl.to(bodycontent,2,{borderStyle:'solid',borderWidth: '48px',borderColor:'#fff',ease: Expo.easeIn},12); tl.to(bar,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(bar2,2,{display:'block',width:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(bar3,2,{display:'block',height:'48px',backgroundColor:'#fff',ease: Expo.easeIn},12); tl.to(social, 2, {opacity:1,ease: Expo.easeIn},12); tl.to(skip,1,{display: 'none',ease: Expo.easeIn},12); tl.to(welcome,1,{display: 'none',opacity:0,ease: Expo.easeIn},12); tl.to(cloud, 1, {x:-400,y:'15%',position:'fixed',ease: Expo.easeIn},12); tl.to(cloud, 1, {scale:0.75,ease: Expo.easeIn},12); tl.from(about, 2, {x:100,ease: Expo.easeIn},12); tl.to(about, 2, {opacity:1,ease: Expo.easeIn},12); tl.to(nav,2,{opacity:1,ease: Expo.easeIn},12); tl.from(nav,2,{x:100,ease: Expo.easeIn},12);

Hi, I am having some trouble on my project. I made some animations using TimelineLite and it works great. The animation are all images and texts moving around and video playing on background. But recently I was asked to export this animations to mp4. I tried many ways on doing it, but no success. 1. I have followed this topic below. It works fine when the animation contains only static images. with a <video> playing on background I just cant do it. 2. I have tried to use headless browser to record my screen, but its too slow I just couldn't get screenshots or screencast (chrome) with less than 300ms. Does anybody have idea on what I can do? Thanks.

Hi all, I would like to replicate the App Store Featured App/Games animation. See this to see what it may look like: https://alfian.d.pr/B7ZbXP Basically, there will be 2 elements in which the styles would be the animated before modal is opened and a different styling after modal is opened. In the App Store case, its the image (increase width size) and the modal title (change x value position). In my Codepen, I would like to replicate such an animation but I have no clue to using the GSAP code to do this. I know I asked a similar question to which the answer was to use SPA (Single-Page Application), but for this case I think its possible to animate with modals. I am using this plugin for the full screen modal pop-up. Any ideas? Thanks, Alfian

Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian

Hi when cloning any node on the page, the scrollTo plugin no longer works, is there a way around this? I've taken the default Codepen example and cloned an element to demonstrate the issue.

Hello, I want to execute a TimelineLite only one time. I use a plugin (fullPage) and when I move to a section of the page 'secondPage', I have a function for executing the TimelineLite( animaFotos() ). But I need the animation only works one time. I've tried with kill method but doesn´t work the animation. function animaFotos(){ //cambio css. para mostrar imágenes y comenzar TwenLite fotos.css('visibility', 'visible'); textoinfo.css('visibility', 'visible'); tl .from(foto1, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.3) .from(foto2, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.6) .from(foto3, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},0.9) .from(textoinfo, 0.3,{y:-10, autoAlpha:0,ease:Power1.easeOut},1.2); } $(document).ready(function() { $('#fullpage').fullpage({ css3:false, anchors: ['firstPage', 'secondPage','thirdPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 1){ animaLogo(); } //using anchorLink if(anchorLink == 'secondPage'){ $('#titulo').html('bio'); animaFotos(); secondLife2('.foto1','img/prueba1.jpg', 'img/1.jpg'); secondLife2('.foto2','img/prueba1.jpg', 'img/4.jpg'); secondLife2('.foto3','img/prueba1.jpg', 'img/3.jpg'); } if(anchorLink == 'thirdPage'){ $('#titulo').html('portfolio'); animaCards(); } if(anchorLink == 'lastPage'){ $('#titulo').html('contacta'); alert('contacto'); animaCards(); } } }); });

Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks

Hi! I'm new to this community. Can someone tell me if I can create independent timelines and fire them at will even if they will overlap? For example: var tl1 = new TimeLineMax (){}; tl1.[some animations]; [later in the document] var tl2 = new TimeLineMax (){}; tl2.[some other animations]; Problem is - when tl2 fires, tl1 stops. What I need: I need to operate timelines independently, fire them at any moment without interferences with each other. Haven't found anything useful in the docs. Thanks!

Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!