Leaderboard

I needed a simple countdown timer class and have seen a few posts here over the last few years, including the awesome timer animation by Greensock here - https://codepen.io/GreenSock/pen/qBjGZaE But I just needed something simple and reusable. This community has been so good to me over the years and I've not been the most contributive member. I created this class yesterday and wanted to share it in case anyone needs this kind of thing. It could use some refactoring so it's probably a tad bloated but it's a good starter class. You can pass the total number of seconds you want the timer to run, the container into which you want the timer to appear, a start callback and an end callback. I did use a few Bootstrap css classes so if you don't want to use that, just style the css as you like. I also used a google font for the timer text. I hope this helps anyone in need of a simple timer. Thanks again for all the help over the years.

Appreciate this helper function, @GreenSock - will be adding it to the toolkit! It provides exactly what we are looking for.

If you want something reusable, here's a helper function... function staggerTo(targets, vars) { let tl = gsap.timeline(); targets = gsap.utils.toArray(targets); if (typeof(vars.stagger) === "object") { let staggerVars = Object.assign({}, vars.stagger), each = staggerVars.amount ? staggerVars.amount / targets.length : staggerVars.each || 0, wrap = (func, i, target) => () => func(i, target, targets), types = "onComplete,onStart,onUpdate,onReverseComplete".split(","), tweenVars = Object.assign({}, vars), callback; staggerVars.each = staggerVars.amount = tweenVars.stagger = 0; "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase".split(",").forEach(n => staggerVars[n] && (tweenVars[n] = staggerVars[n])); targets.forEach((target, i) => { let v = Object.assign({}, tweenVars); types.forEach(type => staggerVars[type] && (v[type] = wrap(staggerVars[type], i, target))); tl.to(target, v, i * each); }); } else { tl.to(target, vars); } return tl; } Usage: staggerTo(".box", { x: 500, duration: 1, stagger: { each: 0.5, repeat: 2, yoyo: true, onStart(i, target, targets) { console.log(i, "of", targets.length, "started", target); }, onComplete(i, target, targets) { console.log(i, "of", targets.length, "completed", target); } } }); Demo: https://codepen.io/GreenSock/pen/PoRweXE?editors=0010 Sorry, I couldn't help myself. I like making things easier for folks with helper functions like this.

I have a project using ScrollSmoother & SCrollTrigger. Amazing btw! In the project I have ScrollSmoother doing its thing in general along with some jump to elements and a couple items with data-speed attributes. ScrollTrigger is handling some batched items to fade in and up along with a few pinned / scrubbed items. One fake horizontal scroll ScrollTrigger is disabled when using touch devices. Everything is working well until I rotate my iPhone (11 latest iOS). I have added an additional debounce that calles .sort() & .refresh but once a change in orientation takes place it appears that the (I think) padding is not updating itself as elements appear cut off, in the wrong place and / or Timelines will not execute. I've set my ScrollSmoother up before any ScrollTriggers with the following parameters: smooth: 1, effects: true, normalizeScroll: true, Am I missing something or is this still being worked on? Thanks for the great code, truly awesome. (I still remember the Flash version that I also loved, especially the transform tool!)

Thanks for sharing!🙂

On orientation change, are you firing ScrollTrigger.refresh()? Based on your original post I'd be curious if the extra debounce you've implemented might be messing with things. You can also call refresh directly on the scrollSmoother with ScrollSmoother.get().scrollTrigger.refresh().

Thank you so much! It makes absolute sense.

Hello there and welcome to the GSAP forum! That is the case because you are creating the STs to toggle the class before you create the ST that pins the first section - so at the time you created all those toggleClass STs, their positions were right - but they can not know ahead of time about you pinning that first section later on in your code, which adds a pinSpacer and thus shifts all the positions of the elements related to the subsequent ScrollTriggers) That is why the positions of the subsequent STs will not be where you'd want them to be in the end. It's best to always try and create your STs in order of appearance on the page. If you can't because e.g. it might be more conveniant to create your STs in loops like you do here, you'll want to have a look at the .sort() method and/or refreshPriority - explanations on the latter are to be found on that .sort() docs-page or in the general ScrollTigger documentation Simple suggestion to work around your problem: call ScrollTrigger.sort() after you created all your STs. That should already help in this scenario. https://codepen.io/akapowl/pen/yLKyoqZ

Sounds like the `Language changed` hook is what you want. As soon as Weglot has changed the the content and fires an event you could split your text. Otherwise I don't know what to tell you, contact Weglot they should have documentation on how to handle certain things. As I read your post there is no issue with GSAP, because the animations are working fine.

Maybe this will help?: https://codepen.io/GreenSock/pen/VwXYeQm?editors=0010

Check out the helper function in the docs: https://greensock.com/docs/v3/HelperFunctions#format

That's because you have custom logic driving all the smooth scrolling that's not taking into account the resizing. You might want to consider just using ScrollSmoother instead: https://codepen.io/GreenSock/pen/JjLojVq Otherwise, you'll need to fix your custom logic.

Lots of custom code

Hi, we have a company account (club member), and I have a personal (free).