Leaderboard

Hi, If I understood the problem right then this is the problem. In the given code: - In CSS the visibility is set to hidden to the main class. But in Js its never set to visible. - From tween been used from Autoalpha 0 which is making them hidden initially. And this has been applied to the individual chars not to the parent. These two things were messing. Solution: - In CSS add "visibility" and "opacity" to "hidden" and "0" to the ".txtMain" and ".txtMain2". - Using GSAP ".set" make it visible using "autoalpha" to the ".txtMain" and ".txtMain2". Here is the code. https://codepen.io/tripti1410/pen/eYbgpEd Hope it helped!

Hi, As the person who created that demo originally, I think it's a very solid base. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 I really don't know what you mean by "it doesn't respond well". Perhaps you can be more clear. the getScrollAmount() function gets called when the window is resized or the ScrollTrigger is refreshed. Those values are neccessary for all the configuration work to happen. You most likely should not delay those calculations. If you need more flexibility look into gsap.matchMedia() as it will allow you to run custom code when you hit certain break-points in browser size and do whatever cleanup or configuration you deem necessary.

Hello again Bjarne. It definitely is - you just need to put in some time, first and formeost to get an understanding of how things work. I see in your demo, that you tried to do something like this: Arch.setAttribute("x-271", p.x); Arch.setAttribute("y700", p.y); That will not work, because there are no attributes on SVG named "x-271" or "y700". The attribute you will need to change is the d attribute that has all the path data. You already found out by yourself that you needed to set the p.x in one place of that path data and the p.y in another - so good job on that ? Now you will just have to make sure to keep that whole string of the d attribute but only change the values in those places needed. For that you could either 'break up' the string in the places you need and feed in the numerical values you got in the right spots via concatenation... Arch.setAttribute("d", 'M100, 100 A671 671 0 0 0 ' + p.x + ' ' + p.y); ...or you could use a template literal / template string to achieve basically the same. Arch.setAttribute("d", `M100, 100 A671 671 0 0 0 ${p.x} ${p.y}`); That would then result in what you probably intended to do, right? Make sure to have a thorough look at the ressources linked. Even if they might be overwhelming at first, they will for sure be helpful for you going forward. https://codepen.io/akapowl/pen/qBLRrLG

Hi and welcome to the GreenSock forums. Thanks for the demo. It looks like you are only creating 1 timeline with all the animations in it. The approach I recommend is to create a timeline for each element and then that element can play and reverse its animation on enter/leave here is a demo from a lesson in my Free GSAP Beginner's Course https://codepen.io/snorkltv/pen/WNZLoNg Check out the course as it will get you up to speed with the latest syntax too. TimelineLite still works but isn't recommended.

It was not ending at the top. It was going back to its original position where it had been placed. I added some content above this text to change the position of this text on the page and the start trigger. You can check the pen.

glad to hear you enrolled in the courses! For debugging I would suggest you log all the dynamic values you are using whenever you expect them to update. I added some logs in the tween() and getScrollAmount() functions. Also it's good to outline all the items you are getting measurements from. It seems something funky is happening with your wrapper. Its border doesn't seem to enclose all of its child elements I'm guessing this is affecting the measurement values you're getting. take this demo and resize it and scroll up and down. you'll see things break out of the red outline https://codepen.io/snorkltv/pen/JjwEvYZ?editors=0010 I'd suggest going through the css and seeing if there is an alternate setup you can use. also play around with pin spacing on and off to see if that changes anything.

Hey @Carl, first of all -> bought your course, looks solid! I will use this, and if something does not work as expected will let you know. TSM!

It looks to me like this line is the problem: $("#nav").css({"top":$("#intro").height()}); You're forcing the initial CSS to be a very specific height there which gets locked into the tween as the "revert" value. Since you're doing a .fromTo() tween anyway, this line of code is completely unnecessary. https://codepen.io/GreenSock/pen/bGOgagp?editors=0010 There's no need for jQuery either, FYI. Nor do you have to create a whole separate tween and ScrollTrigger. Is that what you're looking for?

You don't need jQuery. Here's how I'd do it: https://codepen.io/GreenSock/pen/rNojYvj?editors=0010 Notice I'm creating a new animation each time because it looks to me like you don't actually want to reverse() the original tween on mouseleave - you want the ease to be "back" in both directions which isn't a true reverse. And you want it to pick up from exactly where it left off in both directions if the user hovers over/off quickly. Is that what you're looking for?

Great job! Thx for posting the working demo. I'm sure it will inspire others too.

You're a star! Thanks you for your reply After a revision to bring my code more inline with the demo you sent over I got it up and running. https://codepen.io/luke-stoked/pen/BavppeB

Thank you, Rodrigo! First solution worked well for me. I've wrapped it inside onComplete. onComplete: function() { tl.invalidate(); }

Welcome to the GSAP forum Rick. You'll probably want to have a look at ScrollTrigger its pinning feature and all the options that come with it for something like this. Then you could do something like this, e.g. I hope that will help get you started. https://codepen.io/akapowl/pen/bGOgWZm

Hi, I think the problem is not clear. Final SVG is a path which has many points which point you want to move on cursor? Changing the point on a cursor move is easy. All you have to do is convert SVG path to Template literals and change the particular coordinate with cursor's coordinate in JS. If the shape needs to modify, then use morph plugin gsap. Here it is not clear the behaviour you are trying to achieve. This is the pen I did for line drawing SVG on the cursor move. https://codepen.io/tripti1410/pen/VwLZEZB?editors=1010

No problem always happy to help if I can. Another option you could try, would be the following: Use gsap.set() to center your x,y values so that the timeline doesn't start in the upper left corner (It's always important to get everything in position before you animate). Once your own scrolling threshold is reached, use xTo() and yTo() to move the clippath to the center. Control only the radius in your timeline, as you already do. This way the animation will be more smooth and feel more natural, at least for me. It is worth mentioning that there is also the .invalidate() method, which clears any initialization data. Edit: Something like this, I replaced the approach of step 2. with the onStart function of the timeline. Since we only control the radius and no --x, --y values, there shouldn't be any conflicts (maybe my assumption is wrong). codepen If you move your mouse and scroll at the same time, than the clip-path grows in place instead of moving towards the center. Hope this helps and good luck with your project

Are you trying to do this?: https://codepen.io/GreenSock/pen/dywORRK?editors=0010

Hi, What you could try is that in your button event handler you can invalidate the timeline instance: https://greensock.com/docs/v3/GSAP/Timeline/invalidate() const tl = gsap.timeline({ scrollTrigger: { // all your ST config }, }); // Later on your code tl.invalidate(); Another option could be to manually refresh the particular ScrollTrigger instance and add invalidateOnRefresh in the ScrollTrigger config: const tl = gsap.timeline({ scrollTrigger: { // all your ST config invalidateOnRefresh: true, }, }); // Later on your code tl.scrollTrigger.refresh(); If this is not helping, please be super specific about what you're trying to do, kind of explain step by step the procedure of what you intend to do and what is your desired outcome, because right now is not 100% clear to me what you're trying to achieve here. Hopefully this helps. Happy Tweening!

This baseline code should get you started, the rest is down to styling and crafting interactions. https://codepen.io/GreenSock/pen/gOvvJee It's a big job and I'm afraid it's beyond the help we can offer in here to dig into it in detail.

Hey Cassie & mvaneijgen Thanks so much for the help. I worked through the timeline animation part and then added your scrolltrigger part, it's intuitive when you get into it Result below: https://codepen.io/davedublin/pen/dyeYdRK Dave

Ok, so ScrollTrigger is a GSAP product. It's just a way of controlling GSAP tweens and timelines using scroll Here's a very basic GSAP timeline (I've commented out the start and end panels for now so you can see what's happening) https://codepen.io/GreenSock/pen/YzLyjpm Mess around with that until it looks right. If you want to change the position of the tweens (e.g. add a delay between them) then you can look at this article for guidance When you're happy you can hook it up to scroll using scrollTrigger. https://codepen.io/GreenSock/pen/GRdpBvp I also recommend starting on GSAP basics first. Starting with ScrollTrigger is one of the most common learning speedbumps we see around here!

Hello A few days ago I started playing with GSAP. I would like to make a simple vertical list of items inside container. I found a very similar solution to what I need (codepen). The only difference is that I want all elements to be visible one below the other and not overlapping like on codepen. I tried editing the CSS but I don't think it's enough. I'm attaching a preview showing a static list that I want to animate. On the right hand side is the list that I want to animate. I simply want the list items to go up as you scroll down. Thanks in advance for any tips.

There's an explanation in the docs about this. I find it easiest to visualize it like this: turn markers on for your ScrollTrigger. Now look at where the "start" and “end” values are - it must squish/stretch the timeline to fit inbetween there perfectly. So let's say your ScrollTrigger's end is 500px below the start and you've got 5 seconds worth of tweens in your timeline - if you just change the durations of the tweens to be 100 times what they were before (SUPER long), it doesn't matter because it still has to move the playhead from the start to the end within 500px. See what I mean? So if you want it to last longer, all you need to do is push your "end" further down on the page. Right now, you've got end: "+=100%" which is basically the height of the viewport. Try something like this: end: "+=5000"

Hey fellow GreenSockers A little over five years ago, I took a chance and posted a question on the GreenSock forum. Nobody called me dumb and that was a HUGE relief! So much so that I wrote an entire GS post about it four years ago. It was a turning point for me and my JavaScript journey. Today, I’m taking another big leap in my life and launching a web animation tutorial site. My reasons for doing so are both personal and professional. This thread is a sequel to my One Year post listed above. Call it My Five Year Journey. Personal reasons My life has been full of twists, turns and milestone events over the past few years. I turned the big 50 and ask myself every day how that’s even possible. The memories of getting my first computer (TRS-80) and learning BASIC in the early 80s are so vivid that they feel like it was only a few years ago. Wasn’t it just yesterday I was programming the PET, VIC-20 and Commodore 64 in high school? Time does fly and I’m not getting any younger. I also celebrated my 30th wedding anniversary. That event itself isn’t a reason to start a new website, but the longer I’m married, the more I realize how lucky I am to have a partner and cheerleader with me when I try new things. She has been a tremendous support in this new endeavor. I wonder how I ever talked her into marrying me all those years ago and how she has put up with me for 30+ years. The other recent personal event that has shaped my decision is the one that is affecting us all right now. Seeing the effect of COVID-19 on the world and how it has robbed too many people of their lives and livelihoods has reminded me that time is precious, and you never know what’s around the corner. As they say, seize the day. Professional reasons After taking the leap and posting that first question on the forum, I was hooked on the GreenSock community. I’ve tried to help as many people as I could in my free time. I love seeing someone have that ‘ah-ha’ moment. This new site is an extension of that desire to help and teach. This will be a difficult challenge. It would be far easier to not do this. As a lifelong introvert, I’m far more comfortable in my dark office typing away on the keyboard so this definitely pushes me out of my comfort zone. It will also be a time management challenge to keep posting new content while taking care of clients and still helping on the forum. I’ll do my best. My final professional reason is that this just seems like the universe is pushing me in this direction. I loved computers and programming in my youth, but my career turned to my other loves of video production and photography. Throughout the last decade there have been many forks in the road, and it seems like every decision has led me here. My life has now come full circle. Fear and self-doubt Despite all the personal and professional reasons listed above, there has still been the nagging self-doubt. Will it be any good? Will anyone read it? Hasn’t this already been written? Maybe others don’t have that little voice in the back of their head, but mine starts yelling at me loudly when I try something big. It’s one thing to post an answer in the forum, but quite another to really put yourself out there with a whole new site. After some sleepless nights, I finally found calm from one realization. If I can help even one person with a problem, teach them something new or spark an idea, it will all be worth it. The rest of the fears don’t matter. Life is just too short to be scared or worried. The website’s focus If you know me from the GS forum, you know I love SVGs and making them move with GSAP. The website will, of course, feature a lot of SVGs and GreenSock will power everything. However, my primary focus will be real world projects. I find that I learn best when I’m building an actual project, so I’ll try to keep that as the focus. I’ll have lots of little tips and quick things too, but projects will be the main thing. Frequent visitors to the forum also know I don’t take it all too seriously and joke around a lot. You’ll be happy to know that several of the tutorials feature terrible jokes and puns at no extra charge. Thanks to the GS gang I’ve said it many times before and I’ll say it again. Thank you to Jack( @GreenSock) for creating the tools, but more importantly, thanks for fostering a terrific online community. Had I not discovered GSAP and started hanging around here, I would not know much about JavaScript and the new site would not exist. Special shout-out to @Carl too. He’s already in the trenches with training and tutorials and has encouraged me the whole way as I was getting this thing launched. All my fellow mods — thanks for the help and comradery over the years. You are all awesome! motiontricks.com Finally, without further ado, I introduce you to motiontricks.com My best to all of you. Thanks for reading. Now, let’s get those pixels movin’! ? -Craig (PointC)

Hi, Can anybody tell what the best solution or strategy is for the following problem please: I have a 3d cube with different elements on each face. The is a seperate button for each face that should rotate the cube to the equivalent face. The problem I have is that setting the rotate aspect is relative to the face you are at. In other words if I click on the button linked to the back face the cube rotates 180deg. If you are looking at the front face at the time it works great. But if you are looking at any other face the cube simply rotates 180deg from its current position. So the real question is, how do I target the faces of a 3d cube? I cant get round the logic.