_Greg _

It use Highway for page transitions and old version of gsap (2.1.2) you can check it on inspector

You set once: true so the ScrollTrigger will kill() itself as soon as the end position is reached once Why did I don't know. I see that after kill - blur for #spacer2 is not equal 0 its sometimes 0.01px, sometimes 2.0331px... its like random, I don't know hot to fix it

Hi! Off-topic (!NOT about GSAP): About counters watch video from "google chrome developers" chanel, they say about all problems with counters in one video They create optimal solution

Thank you @GreenSock @PointC

Hi! I find on documantation page property startAt What different between .fromTo and startAt? What are the features of using startAt

Hi! Not sure that this is right way, i think is simple way to use `repeatRefresh` Check https://codepen.io/gregOnCodePen/pen/dyVvaaY?editors=0010 duration, delay, and stagger you can't update with this method.

Hi, and wellcome! Please check this answer Check Helper Function loop for more details https://greensock.com/docs/v3/HelperFunctions#loop

Split your task into sub-tasks. Try to answer the questions: Does the grid have a fixed pattern? (If fixed, then you can try to build a grid using css, otherwise - js). What is the logic of building the grid (where is the first element, in which direction it is built, which element should become small or medium)? Does the grid should have reps, random ... After you create grid - animation will take much less time. Building the grid in your example is just the hardest task, animation is simple (if you don't add lazy loads as you animate, loop ...)

Sure! If you check GSAP home page you will see gallery https://codepen.io/creativeocean/pen/wvzdVPo If you check GSAP page on Codepen you will find alot of usefull examples and answers https://codepen.io/GreenSock For a more specific answer you need to ask a more specific question. Please create a minimal demo

Hi! Sure! You can create animation like this, but not sure about slider revolution or smart slider they are very heavy, I think they are not suitable for such a task, better write your own slider, because its simple task (generate masonry grid) or you can generate grid with masonry and animate it after (not sure)

Hi, @yeu! Check https://greensock.com/docs/v3/Plugins/ScrollTrigger ScrollTrigger + gsap can do all things like in your example You can check ScrollTrigger Demos page

Hi! Try this: handle.t1 = gsap.timeline({ repeat:-1, onStart() { console.log('start'); }, onComplete() { console.log('complete'); } }) .to("#Handle", { duration: 100, x: 1000, ease: "none" });

Hi! Don't forget to check if object load, only after - you can get contentDocument You dont need wait till document load, only object.

I see, thank you! I understand my misstake

@GreenSock Thank you! Yes, i think so, but not sure that it is true ?

I try to learn all functionality of gsap, there is many methods witch i ever seen or use, so i ask can i use buid-in methods like ScrollTrigger.batch(). I never use it, and I think I can implement my idea with this function ? (its working now but only in widget in gsap site )

@GreenSock Yes, this is exactly what I was looking for. The reason i'm trying to avoid a .forEach() - i think that gsap on animate lots of elements with one selector has a built-in method to determine the element at each iteration like y: (i, el) =>... Also, I have tried to use ScrollTrigger.batch, like @elegantseagulls wrote above, but don't understant how to use the scrub ? UPD: I find example scrub is working but again - one start point for all elements : https://codepen.io/gregOnCodePen/pen/abwjXbR?editors=0010 If i open codepen in fullscreen - its show that all elements starts from one point But if i looking in widget: It's a bit strange ?

@elegantseagulls Thank you! Is there a method without using .forEach()? Something like: ... start: ({element?})=>{ // how to get every element of each interation? return element.offsetTop // how to get element? } ...

Hi! How can i specify for each element start position from center block (not elements wrapper) if elements has `absolute` position I try: elements.forEach(e=>{ gsap.to(e, { ... scrollTrigger: { start: e.offsetTop, // i try ()=>return `top+=${e.offsetTop} bottom` but does't work end: "max", invalidateOnRefresh: true, scrub: 0, markers: true } }) } but see that its work slowly Can i do the same without .forEach

@nico fonseca This is exactly what i want! Thank you! I see first time quickSetter

You can use keyframes like: gsap.to('body', { keyframes: [ { '--bg-1': 'blue', duration: 0.2 }, { '--bg-2': 'blue', duration: 0.3 } ] }) About stagger i'm not sure Also you can set duration by defaults like gsap.defaults({duration: 0.2}); gsap.to('body', { keyframes: [ { '--bg-1': 'blue', }, { '--bg-2': 'blue', } ] })

Hi! I'm a little stuck. I want to make an animation: 1. If the blue rectangle decreases to the position shown on the image + gap - we begin to move the inscription at the same speed with which the rectangle decreases. 2. The second inscription also waits until the rectangle reaches the gap mark What happened is very similar, but not the same. Not sure if changing the coordinate when using onUpdate will not affect performance

Don't use `window.addEventListener("load"...)` inside `document.addEventListener("DOMContentLoaded"..)`!!! Sometimes in Safari window load works earlier then `DOMContentLoaded` so your code will get error why do you call ScrollTrigger but never use? Jack give you instruction how to migrate to gsap 3 It should be const notifyTL = gsap.timeline({paused: true})

Hi! I'm not sure that you need for this task create plugin. And i don't understand what animation do you want Check my example, maybe it helps you. https://codepen.io/gregOnCodePen/pen/qBmbREJ?editors=0010

Hi! can you give more information what does it mean?