Leaderboard

Hey Everyone watching this, I was able to make this text reveal animation and button hover effect from https://sendpotion.com/ website here is the link to my codepen account where you can check them, and a big thanks to @Cassie who shared the resources and helped me that the best way to learn is by experimenting and i also learned the GSAP awesome tool looking forward to use them in my projects https://codepen.io/atulkadyan

I am new in using gsap i am trying to use this code pen in my project while also adding other section at the top and bottom of this section but i am not able to do. https://codepen.io/cassie-codes/pen/vYWvwXV

Hi @Yuvraj Bokhre welcome to the forum! That demo looks cool, nice job @Cassie! This demo uses the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ which kinda 'eats' your scroll (because of preventDefault: true, on line 111. So you have to find a way to break out (and in) to this effect at the moment you want! Below a demo that does this, this is not really simple logic, but if you're up for a challenge it is certainly possible. I would advice first making some demo's, Codepen is a great place for that, so you don't have to worry about your real project or your framework trowing errors. Also I would check out this awesome getting started guide https://gsap.com/resources/get-started/ just to get a feel for the basics, you have to learn to walk before you can run, right? If you still need help be sure to fork one of the demos and show us what you already have tried, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/oNQPLqJ?editors=0010

Hi @aLinarte1920 welcome to the forum! If you write backgroundImage: "url('./assets/background.jpg')" it should work, if the current route has acces to it. You where using the same quote twice, so javascript would get the following input, String: "url(", Variable: /assets/background.jpg, String: ")", but you want to pass it just one string eg String: "url('./assets/background.jpg')". I don't know how to explain it better, but strings and variables are not the same thing. Also backgroundImage is not really something you can tween, eg there is no in between state there either is the one image or there is the other image, so this would not really animate in that sense of the word. Better is to create the image already loaded on the page and set it's opacity: 0 and then in GSAP set opacity: 1, opacity is a property you can animate, because it is a number, so it goes from 0 to 0.1, 0.2, 0.3, ... till 1. If that makes sense? From reading your code also keep in mind that duration doesn't really do much in this case, check out the following video If you still need help please make a minimal demo, so that we can dive directly into the code and help you debug, below a pen you can fork which loads all the plugins. And also check out this awesome getting started guide! https://gsap.com/resources/get-started/ Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/aYYOdN

Thank you so much! After hear your explaination, I research further and found some info about it from W3 ORG, now I understood it: The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.

Hi @Leo D welcome to the forum! The top most point of an element is x: 0, y: 0, so setting a -20 will means it moves up 20 pixels from the 0 it currently is. This is how the web is build, but I know what you mean and there are probably programs out there that do function like you are thinking, but GSAP follows the CSS and other web standaards. If you would set transform: translateY(-20px); in CSS it would also move up and that is what the y: property is based on. If you still have a question be sure to post a minimal demo, so we can take look at your code in action. Hope it helps and happy tweening!

Hi, That's because the GSAP core instance is the same in both the useGSAP hook and the GSAP instance you installed as Jack already explained here: In the case of your last demo, the GSAP object is the same. Registering the useGSAP hook as a plugin is only needed in this very particular case, when you have the gsap-trial package. The gsap object from the gsap-trial package is different from the gsap object in the useGSAP hook. In your code you'd have this with gsap-trial: import gsap from "gsap-trial"; While internally the hook does this: import gsap from "gsap"; That means that in the same project there are two different gsap packages installed (all are the latest version though), gsap and gsap-trial, the first is used by the hook and the other is there in order to use the bonus plugins in these type of development environments, that's all. Hopefully this clear things up. Happy Tweening!

Having cards stack is a question I see often asked on the forum and its logic is fairly simple, the only thing is you have to start with a solid foundation before you start animating things, this is not only a must for the stacking cards animation, but for animating anything! First of @Cassie did a really great video on this topic that explains everything in just 2 minutes, so the TL;DR can be found here. Let's walk through the process that works for me 99% of the time. Here is the starting position, we have just some HTML and CSS and we have five cards that we want to stack. If we just use it as is we’ll need to do some calculations. The first card is alright, but the second card needs to move up the height of the previous card, and the third the hight of the previous and the first card, ect. It will be possible, but it will require a lot of calculations that differ from card to card, which will make animating things a bit harder. https://codepen.io/mvaneijgen/pen/MWxgOLa What if we turn the logic around, instead of trying to calculate where to cards need to move .to() we start with them all in the same position that way we know where they are before we start animating and this is personally the approach I take with animating anything with GSAP. See below here an example, I really like @cassie’s idea of doing the stacking with Javascript, ”progressive enhancement!” (but that is an other topic), so here is just the CSS stacking all the cards right on top of each other. Instead of setting the cards to absolute, there is some clever trick with CSS Grid. The parent gets display: grid and all the elements in side get set to the same cell, now they are all on top of each other and they are still in the flow of the document, which you would lose with setting position: absolute; https://codepen.io/mvaneijgen/pen/NWJKagv Ok, now to show why this would be a great way of thinking about it. Check it out, we can move the cards .from() any position to the center of the screen with just one tween! I hope this shows you how powerful this can be with just a few lines of code! https://codepen.io/mvaneijgen/pen/poYzaJW Ok let's explore this further. You want to visually show that it is a stack of cards, so you need an offset at the top of your cards. Just use gsap.set() to offset the cards based on their index and done! I hope you can see that you could easily change all the x properties to y and have the effect be vertical. https://codepen.io/mvaneijgen/pen/ExMYQyO Tell you what, I see you’re not convinced, I’ll trow in an extra perspective rotate for free! As you can see this all uses the same HTML and CSS and with just a few small tweaks to the GSAP code we can drastically change how the animation looks and feels. https://codepen.io/mvaneijgen/pen/MWxgQbV What I hope to illustrate with all these examples is that a solid foundation of CSS will allow you to create any effect you want with just a small amount of GSAP. Wait…! We havent talked about ScrollTrigger, as you may have noticed none of the demo’s above make any use of ScrollTrigger and that has a good reason! Where we started out with just CSS the same can be said of ScrollTrigger it is a smart idea to focus on each step of the animation one at a time, so that issues don't compound when moving to fast to a new step. All ScrollTrigger is doing is animating your animation on scroll, so you first have to create a solid animation before you start to think about implementing ScrollTrigger. But all the demo’s above have ScrollTrigger logic. Just enable the ScrollTrigger code that is commented out to see how they would work. Collection with even more stacking card examples Ok, last one because it is so much fun! Small extra note GSAP uses a default ease: “power1.out”, which gives you animation a little flair for free, but when using ScrollTrigger with scrub: true, it can ‘feel’ nicer to set ease: “none”. (Implemented in the last demo) Hope it helps and happy tweening!