Leaderboard

Hey, when something is out of place, it's often related to basic html/css structure. If you use position: absolute, you need to define anchors to keep it in place. So I added them to your .dot class in the css file and it looks fine to me. codepen For clarity, I reduced the size of dotQuantity (line:24 in js) because I didn't need it that high for my purpose. You can set it back to 1250. Also, there are some guides on how to center elements using CSS. And last but not least, your codepen uses an outdated syntax of gsap, so I can recommend you to have a look at the migration guide. Hope this helps you to continue further and good luck with your project

Hi @jayesh24 there is no need to post your question in multiple places. I've removed your comment on the two year old topic Let's start with one question at a time. What I've done to your tweens is put them on a timeline, now they will play in sequence with each other, this is not what you want, but with the powerful position parameter you can tell certain tweens to play at certain points. Your first tween takes 30 seconds which is 100%, some quick, math 30/100 = 0.3 * 40(%) = 12, so you scale animation should take 12 seconds. I have it start at the same time as the previous tween (with the position parameter "<"), this also includes the opacity (if you want some other logic you could create a separate tween that does the opacity, but also starts at the same time ("<"). Then your last tween starts 2.5 seconds of the whole on timeline. I think this all is a lot easier to manage than doing single tweens with delay calls. Timelines are the best part of GSAP in my opinion. https://codepen.io/mvaneijgen/pen/NWexyYN?editors=0010 I'm not sure what you want with your other question, can you maybe rephrase it and pick one of the options you want to explore?

Hey, you weren't including Draggable or InertiaPlugin and there were a few little errors in your code. Here you go! https://codepen.io/GreenSock/pen/VwqeXBa?editors=0011

Welcome to the forum, Bjarne! If you're going the set the coordinates via the onUpdate callback of your timeline, there is no need to also tween on the x of your line (or rather that whole group containing both your elements) additionaly - and actually that is just bound to throw things off for you because you will have two tweens update values that are relevant. But maybe you also just included that tween to showcase what you're trying to do - in this case; thanks, it helped understand your question Also, just as a sidenote - although you're not going to need it; something like an outIn version of eases doesn't exist - for most eases the available versions are in, out and inOut Now on your actual issue: If you only want to update the horizontal position of the line, you wouldn't want to update any of the y values of the line as they are supposed to stay the same as they are. But what you'll want to do instead is to also update the x2 attribute of your line (the x of where the line ends). ...and technically you already said yourself what you needed to do // So basically you just need to... // ...replace this... Left.setAttribute("x1", p.x); Left.setAttribute("y1", p.y); // ...with this... Left.setAttribute("x1", p.x); Left.setAttribute("x2", p.x); That should already do what I understood you wanted? Does it? https://codepen.io/akapowl/pen/JjwGLpP

Hey, On top of the previous post, I'd like to share a super simple example that animates the background color of a button and reverses the effect (in React). codepen I hope it serves you as a good starting point. Good luck with your project.

Hi @Prasanna and @Rodrigo, Thank you. That indeed works. To recap for anyone bumping into this thread later. We are deploying successfully in our Bitbucket pipeline by adding to our pipeline script: yarn config set @gsap:registry https://npm.greensock.com yarn config set //npm.greensock.com/:_authToken xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx And by running yarn add @gsap/business gsap@npm:@gsap/business to update the package.json file. Thank you for your support, Menno

Yes, building a sequence as @alig01 suggested is what I would also recommend to anyone starting out. As you get more comfortable with GSAP you may want to look into CustomEase https://codepen.io/snorkltv/pen/QWzyZXp I added scale as a property too as the change to opacity:0.7 is fairly subtle Click here to see the ease graph Also if you want a single-tween solution you could explore CSS Keyframes in GSAP

@zzz999 did you try following the directions we've provided twice now? Your demo still has the timeline being created OUTSIDE the matchMedia. // BAD! let tl = gsap.timeline({...}); let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { tl.to(...); }); // GOOD let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { let tl = gsap.timeline({...}); tl.to(...); });

Hey, it's a little hard to understand the question with so little context. But my guess is that you're probably trying to animate something in a sequence. For this, I would recommend using a timeline. Just paste the following into your codepen (I used autoAlpha: 0.5 to see the transparency better, since 0.7 is just not enough for text for my taste) let tl = gsap.timeline(); tl.to("h1", { autoAlpha: 1, duration: 2 }) .to("h1", { autoAlpha: 0.5, duration: 2 }) .to("h1", { autoAlpha: 1, duration: 2 }); and this styling to your css h1 { visibility: hidden; } I hope I have understood the question correctly and could be helpful.

Not sure if there's a question here or if you figured it out? But just incase - That's where refreshPriority comes in From the scrollTrigger docs

You're doing nothing wrong, this is just something really hard to wrap your head around and will require some trickery to get it to work. I've tweaked your pen with the new code and put the ScrollTrigger logic on the timeline, not on the tween. If you have a timeline ScrollTrigger can only control the timeline not individual tweens. I've made it so that the stroke of the letter M zooms in on the middle of the screen, until all other strokes are off screen. Then I've create an extra div called .extraBox which covers the whole screen, this is orange at the moment to show you what is happening, but you would of course make this black for the effect. The problem was with the M that there would be no scale that would zoom that covers every screen, my giving it a max zoom of 30 and filling the rest of the screen with the orange box you can create the same effect without having to recalculate what the zoom would be on every possible screen size. The .extraBox animation happens on -0.4 of the previous tween (which is 0.5 seconds long, the default) with the position parameter and scales only in the X directions. Maybe you need to remove this orange box for mobile devices, but that you could do with gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNLrQWg?editors=0100

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you. You probably want to use our Seamlessly loop elements along the x-axis helper function, but if you're new to the tools I would advise first getting a bit more familiar with them. Check out the amazing starter guides below" https://greensock.com/get-started/ https://greensock.com/get-started-2 After you've tried somethings, post back here if you're stuck with the Javascript that is not working.

No, not really. Here's a way to do it: https://codepen.io/GreenSock/pen/qBLOePj?editors=0010 Is that what you're looking for?

Then query for a div. I don't really thing you want any div on the page, but you can do it. This has nothing to do with GSAP, this is pure Javascript or in your case jQuery. https://codepen.io/mvaneijgen/pen/OJryKpB?editors=1011 Or you can query for all the elements that you want to be clickable, but you'll find that then it will be much easer to just give the element you want to click a specific class in your HTML. https://codepen.io/mvaneijgen/pen/mdaeNWL?editors=1011 Keep in mind that as per forum guidelines, we like to scope this forum to GSAP related questions

Hey, as long as splitting the word into chars works, you could do something like this codepen I also helped someone in a other thread with a similar effect and he split the words differently, maybe that could help too. Good luck with your project

Hi @aestic welcome to the forum! It seems like you were building your own SplitText plugin https://greensock.com/docs/v3/Plugins/SplitText instead of doing that, why not use the real deal, saves you a lot of time of debugging! I've also updated your tween, I've created a timeline. I find it easier to have my ScrollTrigger logic separate from my tween, makes the code easier to read. And instead of a .fromTo() tween I used a .from() tween, because opacity: 1; is the browsers default. So what I do in the blow pen is split the text in lines and then for each line I again split it in chars. Then I have a timeline with ScrollTrigger that controls one tween that animates each character from an opacity of 0 with a stagger of 0.1 second for each character, this is the magic that will make it they will come in one after each other. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PoXPMYR?editors=0010

Understood! Thank you very much. ?

I would create a single animation that has an onUpdate function that is used to update the slider value and the displayed number https://codepen.io/snorkltv/pen/qBLOwZR?editors=0011

@mvaneijgen thanks for the support, heureka issues are fixed when we are working with angular we should use import and resgisterPlugin part which solved the issue, line number 3 and line number 16 fixed the issue, thanks for the support hope the reason for this topic is fixed, let me mark as complete import { Component, OnInit } from '@angular/core'; import gsap from 'gsap'; import ScrollTrigger from "gsap/ScrollTrigger"; @Component({ selector: 'app-recent-work', templateUrl: './recent-work.component.html', styleUrls: ['./recent-work.component.scss'] }) export class RecentWorkComponent implements OnInit { constructor() { } ngOnInit(): void { gsap.registerPlugin(ScrollTrigger); const container = document.querySelector(".recent-work-wrapper") const scrollBox = gsap.timeline({ scrollTrigger: { trigger: container, start: "top 80%", end: "bottom 20%", toggleActions: "restart none none reverse", markers: true, scrub: true, } }) scrollBox.to(container, { scale: 0.8, }) } }

Hi, There is any chance that you could simplify your demo? Is a bit too much code and makes it a bit hard to follow. Keep in mind that Jack suggested to create the timeline instance inside the MatchMedia instance: let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { const tl = gsap.timeline(); // ... rest of your code }); Hopefully this helps. Happy Tweening!

Hi all! I was wondering how I could get the snap to increment based on the float number I have that is in the tenths place. As you can see in the codepen, I have a number 980.4 GSAP works great animating this but unfortunately you can see it showing digits past the hundred thousandths. Is there a way to truncate it down to only show the tenths place? thanks!! Lance

You mean like this?: https://codepen.io/GreenSock/pen/poOaVZd

Hi, In the mean time while either John or someone else can update the package to work with NextJS 13, here is a simple example that uses GSAP and React Transition Group to create the animated transitions between pages: https://stackblitz.com/edit/nextjs-13cw4u Right now it seems that Stackblitz has a few issues with their webcontainer (what they use to run Node and SSR on the browser). Here is the same example but using React and React Router: https://stackblitz.com/edit/react-6rzfpp Hopefully this helps in the meantime. Let us know if you have more questions. Happy Tweening!

Hi Dastan, You're ScrollTriggers aren't created in the order they appear, so you'd need to sort them. gsap scrolltrigger (codepen.io)

First thanks for this awesome plugin. It's really good. I have a page with a ScrollTrigger controlling a timeline animation, and it's pinned so it's adding pinSpacing to the page. Further down the page are other animations that get triggered as soon as they enter the viewport. However the pinned Scrolltrigger is adding extra height to the page but the subsequent Scrolltriggers are not taking that into account and are firing off way before they should. Any ideas? In the codepen I've put some comments, you can disable the first ScrollTrigger in order to see how the second one ought to work. Thanks in advance!

Hey @Dzoniis, Here comes another option ... https://codepen.io/mikeK/pen/KKWNvNL?editors=1010 Happy scrolling ... Mikel