Search the Community

I wanted that after the page is loaded the entire content of the page appeared, but when i added spawning animations on the ".hamburger" the rotation animation does not work then, but but as I remove reappearance animations it all works. How do i have rotation and appearance animations? I don't understand why keyframes don't work the line of code that causes the element to appear, when it is deleted, rotation will work .from('.hamburger', 0.3, {x:-100,})

Coming from CSS, I am used to being able to control what happens at a specific point during an animation with keyframe percentages. This is particularly helpful when the change I want to animate doesn't follow a linear pattern from state A to state B, but rather has some variation in between. So, for example, I can do something like this: @keyframes irregular-animation { 0% { transform: scale(0); opacity: 0; } 75% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } } However, I haven't managed to figure out how to do the same with GSAP. In GSAP, it seems I only have control of the start and end states (like with toFrom), but nothing in between. I know I can use custom ease functions to achieve somewhat of a similar effect to the one in the snippet above (whereby I design the easing curve to overextend a little), but this is far from ideal since I often only want to change a single property in this irregular way, not the entire tween. Notice how, in the snippet above, the opacity follows a linear transformation, and it would not make sense to overextend it (even though, for this example, an opacity of, let's say, 1.5 at 75% wouldn't break the animation). Also, it's hard to manipulate a custom curve such that a property reaches a specific value exactly after 75% of an animation is done (or an even less intuitive percentage, like, say, 27%). Timelines are also not ideal for this (from what I've tried, at least), because I want the entire animation to follow along the same easing curve (which is not the same as reusing the same ease in each tween) and, again, it's tricky to calculate when exactly 75% or some other percentage of the overall animation will be done. But maybe I'm missing something... If you had to recreate the simple animation in the CodePen I linked using GSAP, how would you do it? Is it possible to control the values for properties at a specific point during an animation that resembles what we can accomplish with @keyframes in CSS? Thank you for reading. I appreciate any help.

Hello, I'm new to GSAP and wanted a little bit of help with one of my projects. I'm trying to recreate the text animations in this codepen https://codepen.io/kh-mamun/pen/NdwZdW. There are seven different text animations in this codepen. If someone can help me by just recreating only one of the animations as I cant quite grasp how to perfectly time keyframes with staggered animations. Here is one of my trials for the animation called "revolveScale" in the codepen or also tagged with class "one": var char='.char'; var duration=5; var tl=gsap.timeline(); tl.fromTo(char,{x:-150,y:-50,rotation:-180,scale:3,opacity:0},{stagger:{amount:duration*0.6},x:20,y:20,rotation:30,scale:0.3,ease:'none'}) .to(char,{stagger:{amount:duration},opacity:1,ease:'none'},"<") .to(char,{x:0,y:0,stagger:{amount:duration*0.4},scale:1,rotation:0,ease:'none',delay:duration/char.length},`<+${(duration*0.6)}`);

Hi, Extremely new to GSAP etc, and I only found myself here by accident after weeks of trying to find something JS that would speak to pseudo elements. So hooray!! My problem is I can't seem to figure out how to get my function to repeat and I'm not sure if I've quite nailed the conversion. I've converted from a keyframes animation and it seems to be working okay, however it only does it once and then stops. I've looked through a variety of the instructions and forum questions on here to get to where I have, but each one doesn't seem to quite gel to my situation. So basically my keyframes were: @keyframes hello { 0% { top: 100%; } 33%, 100% { top: -50%; } } And my selector: .world::before { animation: hello 3s 0.4s ease-in-out infinite; } So all simple stuff. To convert this, I have this GSAP so far: gsap.registerPlugin(CSSRulePlugin); var rule = CSSRulePlugin.getRule(".world::before"); gsap.to(rule, 0.3, { cssRule: { top: "100%" }, ease: Power4.easeInOut }); gsap.to(rule, 0.7, { cssRule: { top: "-50%" }, ease: Power4.easeInOut }); So everything's talking to each other, but I can't get the GSAP function/rule to do the "infinite" part of the original animation. And again I'm not sure if I've nailed the timings based on the percentages in the keyframes. And of course the 0.4s delay, I'm not sure where to put that either. I've created a code pen with the usual bits to try and illustrate, if that helps at all. Thank you very very much for any help!

//old way tl.add([ //single hop TweenMax.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: Power1.easeInOut}), TweenMax.to("#tail1", 0.1, {rotation: 0, ease: Power1.easeIn}), TweenMax.to("#tail1", 0.4, {rotation: 24, ease: Power3.easeOut}), ],0, "sequence"); //new way tl.add([ //single hop gsap.fromTo("#tail1", 0.25, {rotation: 24},{rotation: -24, ease: "power1.inOut"}), gsap.to("#tail1", 0.1, {rotation: 0, ease: "power1.in", delay: .25}), gsap.to("#tail1", 0.4, {rotation: 24, ease: "power3.out", delay: .35}), ],0); Hi! This is my first ever post in the forums, but I've gotten so much valuable information from here over the past several years, so first and foremost, this community has my great appreciation. After over a year having not directly touched banner/GSAP animation, I recently dove back in and saw some amazing new things had happened with the new GSAP. But then I saw something I was quite sad about...like, it surprised me just how sad haha. One of my favorite ways to break out smaller pieces of complex animations was with the method under "//old way" in the code snippet (the codepen is just an example of one such complex animation where these tween arrays were extremely helpful). It was a beautiful thing to animate freely with any combination of 'from, to, fromTo, and set' then slap a "sequence" after the position parameter and know that the whole little sequence could then be moved around on the timeline without the need for further nesting timelines or doing a bunch of math for delay values. You could even add negative delays to get some overlap if desired—it was slick! Under "//new way," durations of tweens get added for the delay value of the next tween. It works the same way as "sequence" did, but it's more work, and animating becomes a pain as you're dialing it in because you have more things to change. Is there any hope for the "sequence" method on tween arrays to make a comeback? It's also very likely that I'm not versed enough in the new GSAP to know there's something better, faster, and stronger than my beloved "sequence". I am aware of the new keyframes method, which seems super cool, but as far as I know, not as cool for two reasons: you can't combine "from/fromTo/to" within the keyframe sequence, and you can't mix targets within the keyframes. That makes sense when you think of them strictly as keyframes, but I miss the flexibility. Have I missed something with the keyframes method? Or is there some other new method that I should explore? I appreciate any thought toward this, and I'm curious to know if I'm alone or if anyone else feels like something has been lost here.

With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?

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

I am looking for capturing objects position from canvas. Here is an example http://cssanimate.com/ Is it possible to update object position from canvas to code?

Hi there! I'm new in the GSAP world but already loving it! Today, I'm trying to replicate a loader animation that I found on loader.io. The problem is that it provides either a CSS animation or an animated (SMIL) SVG (which is bound to be obsolete). That's why I tried, in order to be better at tweening, to replicate the effect using the base SVG minus the animations. The effect I'm looking for is a seamless loop: when the first ripple is a 50% of the animation, the second one should start and when the second one is at 50%, the first one should start again... You get the idea I tried with two timelines but my brain can't seem to process the delays and duration needed to achieve the effect, let alone the easings... Thanks in advance to anyone willing to assist a noob in understanding the intricacies of the GSAP world

I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs. I am pretty sure it can. This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle of creating a javascript reaction tester application: http://codepen.io/KerryRuddock/pen/rLJPkq To view the codepen correctly, please change the View to Full Page. Click Start. A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl This codepen is HTML, CSS and JS only, no GSAP just yet. The code is a collection of tests in CSS and Javascript. Not all of the code is used within my application, I am experimenting. Apologies for any code read-ability issues. I need to know if I can do the following with GSAP and perhaps a hint in the direction to go in. In this topic, I use the word 'tweened' to cover any object that is the middle of animation, transition, transform, keyframes, and any other time/movement speciality that I may have missed.. 1) I will be changing the reaction tester animation to GSAP I hope the switching over goes smooth. My goal is to have a 'tweened' object collision detection checking in real-time. The collision may be against a border or perhaps another 'tweened' object. I need to perform real-time interval checks of the shapes x,y position of the object during a 'tween'. Can I do this? On a mouse-event, ie. object.click(), I need to kill any tween any progress. Can I do this? On a collision-event, I need to either be-able to either a) kill 1 or more tweens and start new tweens, or modify the existing tween that is currently running. Am I able to do either a or b or both? Thanks for your time, Looking forward to your feedback.

Hello everyone, I am new to GSAP and I need your help to convert a CSS keyframe animation in a javascript one with GSAP. @keyframes elliptical-anim { 0% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,0deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,0deg) scale3d(.1,.1,1); } 20% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-72deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,72deg) scale3d(1,1,1); } 96% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(1,1,1); } 100% { transform: translate3d(0,150%, 0) rotate3d(0, 0, 1,-359deg) translate3d(0,-150%, 0) rotate3d(0, 0, 1,359deg) scale3d(.3,.3,1); } } I'm using the 3D version of the animations in order to force the hardware acceleration. Thanks in advance for your help !