Leaderboard

this demo should help https://codepen.io/snorkltv/pen/JjowpLO

In case it's helpful to anyone else, I put together a demo that has directional snapping, variable width sections, and nav links: https://codepen.io/GreenSock/pen/xxEQNBB?editors=0010 🎉

Hello nonoumasy, Welcome to the forums! I wouldn't say GSAP is After Effects but with code. I will be pendantic here a bit just for the sake of being... After Effects has its own scripting language so, it has code. GSAP is only a tweening engine (with some extra plugins for some extra magical feel) so, it is not comparable with After Effects. Now, if you rephrase your question to: "Can I use web technologies to create the animation like this using GSAP as the tweening engine"? The answer is: Definitely. It wi

Hi @Lichay, I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay: gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, });

It isn't staying there for 1-2 seconds in your demo - it's an illusion caused by the fact that you're using a "power4.out" ease which makes it slow WAY down at the end. If you change that ease to "none", for example, you'll see the change in direction is immediate. To make it jump back to the very start of the animation once it completes, you can use an onComplete to basically "rewind" it like this: https://codepen.io/GreenSock/pen/43a85e285303a5e8f47ae9b9090f7ca2?editors=0010 There are actually a bunch of ways you could do it, but I don't want to overcomplicate

Hey @mvaneijgen I don't know if you realized, but that function you have in the onUpdate in your pen doesn't work, even without the stagger. I assume this is what you intended? https://codepen.io/akapowl/pen/b2c2c56064274fd14620faa9d5537e40 A way to do this respecting the stagger is to create a stagger-object and put the onUpdate-function in that stagger-object, targetting each element to be staggered individually. Hope this helps. Cheers, Paul Just for reference, I'll link the old thr

Hey @Nysh, This could be an alternative https://codepen.io/mikeK/pen/WNGmQvG Happy tweening ... Mikel

Hi AdulTSU, This is an interesting challenge and not too tricky with GSAP, but it does require knowing some of the finer nuances of the API. Please see this video on placing repeat in the stagger object vs placing it on a timeline or tween I was able to get what you want pretty close I think with this approach https://codepen.io/snorkltv/pen/BaLMJYP?editors=0010 The blog post below contains a lesson from my course GSAP3 Beyond the Basics which shows how to get rid of any pause between repeats https://www.snorkl.t

If you have multiple elements you need to address, .querySelector('.whatever-element') won't work. You'll need to use .querySelectorAll('.whatever-element). const textTitle = section.querySelectorAll(".fade-up-title span"); const textText = section.querySelectorAll(".fade-up-text span"); Does that help?

Hey @kobracode I don't think I understand what it is you are asking for. And also, since this is the case, how about you try giving what you want to achieve a shot yourself first, and share your results with us. This way not only might it be easier for us to understand what it is, you are asking, but also will you learn way faster how to achieve these things. I can't just do every thing you need for you - that is not what these forums are there for in the first place. Sounds like for your latest request you could a

Hey @Narendra Verma The elements you are trying to animate to autoAlpha: 1 with a .to()-tween are visible and have an opacity of 1, so your tween basically tweens them from visible to visible. You should set them to be invisible before, if you want to use a .to()-tween. https://codepen.io/akapowl/pen/qBaKMEQ

Hi, In the same useEffect() hook that you're using to create the new animations, before doing that, kill all the animations that will be created again. For this I would recommend a factory function that will kill and then re-create all the animations that will be affected by the resize event. With that in mind is always a good idea to store your animations in a ref using the useRef() hook in order to make it simple to access to them and create them again. This also ensures that the animations are not affected by re-renders that are caused by other reasons. S

Hey @brcxyz - welcome to the forums. The issue seems to be related to the 'ff' you have at the end of your color-hex-value. Removing that seems to make it animate properly. Does this help? https://codepen.io/akapowl/pen/NWRMGPq Cheers, Paul

Hey ndrs81 and welcome to the GreenSock forums. You're right, GSAP is great at this sort of thing and this sort of thing is impossible to accomplish with CSS alone. There are a few different aspects in play to create this effect: The text is animated with a constant velocity while the container is hovered. Each letter wraps around to the end (right side) when it goes off screen in the beginning (left side). This can be done using GSAP's built in modifiers plugin as this thread covers. When the container is un-hovered, the velocity is animated to 0 over time.

Welcome to the GSAP forum @Babilux. Maybe the following recent thread(s) and provided example on the PlayCanvas forum could help you. https://forum.playcanvas.com/t/gsap-with-playcanvas-is-it-possible-to-use-it/16546 https://forum.playcanvas.com/search?q=gsap There appears to be many other related discussions on their forum. A few concerning GSAP and many concerning tweens in general. Likeminded users with direct knowledge of PlayCanvas can assist you over there if you are unable to provide an exported example for people to assist you here. But unl

Hi @Navaneethakrishnan Welcome to the forum. I'm not sure what your requirements are for the final project, but you may be able to use DrawSVG for this. Here's a quick demo with hard coded values that may give you some ideas. https://codepen.io/PointC/pen/eYdyRba Happy tweening and welcome aboard.

Hey @luffyacekun The two ScrollTriggers you create for the pinning are being triggered in exactly the same place, so I doubt that would give you the wanted result anyway. ScrollTrigger will probably just go with the last of the two created ScrollTriggers in this case. I tinkered around a bit with your setup, trying to create two different ScrollTriggers for pining and a seperate one for the animation. I got to a solution that works exactly like you described, but I can not explain why it does so, because it was more of an accident. The problem, tha

@Lichay you have been asked many, many, many times to provide a minimal demo that clearly shows the issue in context. You did that in your original post (thank you!), but then Zach provided you a list of problems that he noticed in your code. If you want help, you must provide an updated demo (maybe fork the old one) and clearly explain what isn't working the way you'd expect. When you keep coming back with a simple "I tried everything...it doesn't work" that doesn't allow us to see where you mis-applied the fixes or what other issues exist in your code. We have burned quite a few

I figured it might be useful to see it converted to ScrollTrigger so that you could study it. Look how much simpler the code is: https://codepen.io/GreenSock/pen/ccb4c35c8a930f827383f09e15f3b052?editors=0010

Hey Ali. A function call is just a function call. You can't reverse a function call. Additionally it doesn't make much sense to use two timelines to do what you're doing - you should probably just use one timeline. Often times it's best to not rely on class names and CSS transitions for your animations. Using GSAP for all of your animation will give you far more control and keep all of your animations in a central location. Animating everything with GSAP will also prevent you from making some logical errors/creating conflicts. With that being said, if all you want to d

It's difficult to troubleshoot by just looking at a few screenshots, but the errors make it sound like you wrote your ScrollTrigger stuff incorrectly. For example, you'd get those errors if you did this: // BAD gsap.to(".whatever", { scrollTrigger: ".whatever", pin: true, end: "x=500", scrub: 1 }); Instead of this: // GOOD gsap.to(".whatever", { scrollTrigger: { trigger: ".whatever", pin: true, end: "x=500", scrub: 1 } }); Notice the ScrollTrigger-related values are nested in a "scrollTrigger" object. In the first example, you're literally telling GSA

Is it working better now (after clearing your cache)? There was a very particular edge case that I needed to work around in DrawSVGPlugin, requiring one line of conditional logic that I put into the next release, and you can preview it now on CodePen with the usual URL: https://assets.codepen.io/16327/DrawSVGPlugin3.min.js

I'm super late to the party!!! Sorry but I've been extremely busy the past days. @DMIND as you mentioned, yeah the rendering starts from the last branch in the tree and goes up, so in that case you can either use forwardRef in order to pass a child ref to it's parent, in order to create and control the ScrollTrigger instance in the parent element. Another option, if you need to pass more than one ref from child to parent, is to send a method as a prop to the child element in order to send all the refs you need to pass to the parent component. Yet another option could b

PS Those were done by @creativeocean (Tom Miller) His CodePen profile. https://codepen.io/creativeocean

Sure thing: https://greensock.com/docs/v3/GSAP/Tween/targets() You should also find it if you do a browser search in the general docs for a tween or use the sidepanel on the left for search

Paul's solution above may be all you need and works great. In B-sides, Bonuses, and Oddities I have a lesson (with 20 minute video) that shows how to build a re-usable counter effect that makes chaining these types of animations a breeze. Here is the finished demo https://codepen.io/snorkltv/pen/NWRqmOv?editors=0010 Once the effect code is registered you can animate a counter with one line like tl.counter("#studentsCount", {end:1860, increment:10}) the effect reads the current value in the target html item ("#studentsCount"), an

Hey @jollygreen Adapting that sort of effect should be pretty straight forward and cases like this one are actually great opportunities to learn how to handle GSAP and the JS that would be required to trigger that effect. For the hovering you would need some eventlisteners - mouseenter and mouseleave - to trigger a change on the playstate of the animation. You could for example set up a timeline that is paused initially and on mouseenter trigger it to play - on mouseleave trigger it to be reversed. Getting to what to do in the timeline, things should be

It's actually not a bug. gsap.getProperty() is primarily for CSS properties or normal (direct) properties of object, not attributes but it does fall back to attributes when nothing is found. The issue is simply that Chrome reports the getComputedStyle() with "path(...)" wrapped around the value. Like Zach said, if you want to get the attribute, it's best to just do element.getAttribute(...). Here's an approach that's simpler in some ways, but more advanced in others: https://codepen.io/GreenSock/pen/poEBzaJ?editors=0010 It's more performant because it's simply ani

Hey @Ali Manuel That page actually uses GSAP 3.5.1 and ScrollTrigger. The answer to that question of yours depends on which animation it exactly is on that page, you are referring to. For the text-block on the left for example: Sure, pretty much doable with just HTML, CSS and the use of GSAP, triggering the animation on scroll with ScrollTrigger ( they are setting overflow: hidden to the page's body in between those 'full-page-like'-transitions, to prevent users from scrolling further, before those time-sensitive transitions have finished ) For the

hmmm... seems okay to me. Maybe I didn't save when I reposted it. Should be alright now. PS I made a slight adjustment to your update progress function. I seem to remember that GSAP 3 deprecated negative progress so I'm keeping it between 0—1 in the fork.

Hey @pjtf93 Working quick on codesandbox in that environment you use really was a pain for me, so I decided to show you an example in a forked codepen instead. The key to that demo is understanding how durations and thus also the position-parameter work on ScrollTriggers with scrub applied: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub What I did here, was 1) Add those <p> paragraphs (instead of your h1s) to the HTML-Markup inside of each .panel-text 2) center things up via CSS inside each .panel-text b

Sorry for the misunderstanding: What I was referring to was the part of killing off the old ScrollTriggers before/when transitioning and having to create them from scratch when the content of the new page has loaded. Otherwise ScrollTrigger might not have the correct dimensions to work with. "You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the thr

Yeah, the performance bottleneck is almost ALWAYS graphics rendering which has absolutely nothing to do with GSAP. And it looks like you're using filters (like blur) which KILL performance because the browser has a very hard time rendering those. So my guess is that less than 1% of the CPU load is GSAP and the rest is graphics rendering. That's why it won't matter if you switch to CSS to do the animation either - the browser still has to render the same stuff no matter which technology is interpolating the values. For the record, I've had literally thousands of elements animating

Thanks Dale! Yeah, I just called gsap.makeAwesomeVideo() and POOF, it spit that out. Lots of building demos, writing a rough script, recording, re-recording, editing, and leveraging CodePen big-time. Some of the title screens were actually just CodePens that used SplitText and GSAP to do all the animation. Like the black screens with text inbetween sections, and the intro/outro - all GSAP. It was super easy to then swap in new text, get that effect with zero effort, and record my screen with Camtasia. Thanks for the kind words. It took me an embarrassingly long time to

Hey @kobracode If you want that section to scroll over the previous one, you could/should set pinSpacing to false on that pin of that first section. If that is done, it still appears that the first section is above the second one on the z-index, so you'd have to specify a z-index for each of those sections (alongside adding a position: relative to them for it to work). Also an extra suggestion from my side would be to change the end of your ScrollTrigger to something bigger than "+=100%" or otherwise in this setup you will see a nasty color-block moving upwards th

Hey @David Aragon, Welcome to the GreenSock Forum. 'Trigger the animation just "while" I'm scrolling': Do you expect this effect? https://codepen.io/mikeK/pen/GRjXgRL Happy tweening ... Mikel

Hey All, Haven't posted here in awhile, but came up with this concept over the Holidays when my boy got the Simon game for Christmas. Enjoy! http://rabondigital.com/html5/google/index.html

Hello a.joshi84, Welcome to the forums! What you are asking is no small feat. It's not particularly difficult but it does require a good deal of planning and orquestration. The way that animation was created is a series of several different smaller animations all being played one after the other as the page is scolled. The only hard thing is making sure your animation is setup correctly so that all the different elements land exactly where they are supposed else the illusion is broken (In the case of the link you sent, there's a point in the animation where the lady's a

Hey @ywlee, You can find a lot of information in the DOCs. The gsap.ticker is like the heartbeat of the GSAP engine - it updates the globalTimeline on every requestAnimationFrame event, so it is perfectly synchronized with the browser’s rendering cycle. You can add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want. Happy tweening ... Mikel

Probably animate it just like you would with regular canvas or svg, using the stroke dash offset/array. https://codepen.io/osublake/pen/b0137a508fd77217da382a4aa41ec27f

My days are pretty much a 50/50 split between AE and GSAP and this is only my two cent opinion, but I would definitely do that in AE. As much as I love GSAP, the complexity of all those elements would be a nightmare. Adding interactivity on top of that would also take it up a level. Performance would be an issue as @ZachSaucier mentioned. If you do opt for the code/GSAP route, I'd say if it doesn't move, make it a static image. In AE, that whole thing would be pretty easy. All the walk cycles could be handled with Limber or DUIK. The rest of it is just a bit of vector work and adju

If I may interject: The issue here is to do with how efficient Vue is when updating the nodes. By default Vue will only re-render what has been changed. In this case, only the inner text is being changed. If you look at the state of your application with Vue dev tools, I bet you can see the string updating correctly. No animation can be triggered because there is alreay a bunch of other things inside your element - all the divs that SplitText created in order to do its magic. What is missing is for you for manually tell Vue to re-render the whole element you

Sure, that's easy: ScrollTrigger.batch(revealContainers, { onEnter: elements => elements.forEach((e, i) => e.animation.delay(i * 0.2).restart(true)), once: true }); https://codepen.io/GreenSock/pen/6e8cc03a56bb88f7296adf6fa2fd985b Is that what you want?

Hey @thedarkstrix @Carl's answer in this recent thread shows basics of how to get to achieving an effect like this for the text. You could use the Split-Text plugin (and split by lines) But be aware that this is a Club Greensock plugin for Shockingly Green Members and above. If you have a specific setup, you could also just wrap those specific lines of text in a wrapper that has overflow: hidden, and animate them inside of that wrapper - just to say, that SplitText is not a must on this, but it sure is nice to have and makes a lot of nice

Hi, This effect was literally the most recent lesson I added to my GreenSock course bundle. To split the text and animate character by character I would suggest SplitText. To make the text appear that it is coming from an invisible div as you said the trick is to give the parent div overflow:hidden in the css. Below is the demo from the lesson. Feel free to pull it apart https://codepen.io/snorkltv/pen/XWjZMgJ You probably want to pay attention to what is happening to the "h2" and ".tagline" Change the yPercent value to 100 (positive)

Yeah, by no means I wanted to denounce the use of tailwind. From what I've seen, I am pretty sure, it easily gives you a lot of opportunities to do things, that you'd have to 'code' yourself otherwise. But as mentioned, it is sort of neccessary to have a certain degree of control over your setup, and I just didn't feel that, when using tailwind. In the end it is 'just' a tool - and with tools, the thing is, that people who do not know it, they also won't know what it actually does - kind of like jquery in js. ...or even when using GSAP and asking questions about

Perhaps you could use progress on update for this https://codepen.io/mikeK/pen/OJXRyYN Happy driving ... Mikel

Hi Shehzad, So glad you found a solution and better understanding from the solutions presented here and the course. When you put a duration in the defaults it will apply to every tween. But the engine properly ignores that for set() which will always have a duration of 0. This is proper because you could want every tween in a timeline to have a default duration and still be able to use a set() with a 0 duration. A set() has a very specific purpose: to apply values instantly. If you want to have a default duration, use to() or from() tweens h

Hey, welcome to the forums @dr34mo Changing the opacity from a specific origin is not possible, so you'd have to find a workaround to achieve what you want. What you could do besides using SVG as @PointC hinted to, is tween on an image/div with a gradient, that initially covers your content. Maybe something like in this example. https://codepen.io/akapowl/pen/YzWGBJY

I just wanted to say the same along those lines of what @PointC just said. Looks like maybe animating clip-path wasn't supported back then? Even with the latest TweenMax it already works. https://codepen.io/akapowl/pen/RwGjXLJ