eightarmshq

Thanks for the reply and helpful article.

I am trying to make a number of items in an SVG move horizontally across the screen. As they enter the screen, I want them to fade in. The way they are spaced out is important to the designer. It looks something like this: So I make a timeline that has each block fade in: const makeTimeline = (el) => { const text1 = el.querySelector(".text-box-1"); const text2 = el.querySelector(".text-box-2"); const text3 = el.querySelector(".text-box-3"); const text4 = el.querySelector(".text-box-4"); const text5 = el.querySelector(".text-box-5"); const tl = gsap.timeline({ paused: true }); tl.set(el, { x: `100%` }); tl.set([text1, text2, text3, text4, text5], { opacity: 0 }); tl.to(el, { x: `-100%`, duration: MASTER_DURATION, ease: `linear` }); tl.to(text1, { opacity: 1, duration: FADE_DURATION }, 3); // ... tl.to(text5, { opacity: 1, duration: FADE_DURATION }, 5.4); return tl; }; But no matter what I do, I cannot get the timing right so they seamlessly loop (trying below to do 0 seconds, a 1/3rd and 2/3rds): this.part1 = document.querySelector("#home-anim-1"); this.part2 = document.querySelector("#home-anim-2"); this.part2 = document.querySelector("#home-anim-3"); this.tl = gsap.timeline({ repeat: -1, duration: MASTER_DURATION }); this.tl.add(makeTimeline(this.part1).play()); this.tl.add(makeTimeline(this.part2).play(), MASTER_DURATION * 0.3333); this.tl.add(makeTimeline(this.part2).play(), MASTER_DURATION * 0.6666); Here is a codepen: https://codepen.io/EightArmsHQ/pen/VwRRJwe/41d6af9882ac220b57f96b99dcb615f3?editors=0010 If I use 2 items, it pretty much works: https://codepen.io/EightArmsHQ/pen/eYXXwvo/4e5993c6cfd8ed75f482f3e78502b9de?editors=1010 Is anyone able to help me line up the animations? I have a slightly more stripped back version here but its even more broken: https://codepen.io/EightArmsHQ/pen/PoLLrmJ/8b217cad4c1cbd412cd6271547e015db?editors=0010 Eventually, I'd like to set the delay of the second and third instance to be negative and get a seamless loop / no delay at the start but I'm already struggling so much! Thanks

I have an image that flips from one div to the other. When the animation happens one way, it: Is appended to the target div transforms really nicely over to it The other way, it: Is appended to the previous div (which has overflow hidden on it) transforms over to it, except it is hidden by the overflow. Is there a way I can make it work that both animations happen in the overflow: visible div?

You haven't been totally clear on what you have tried so far. I notice that there is a goToSection(i)function though. I added a <div class="buttons"></div> at the top of the page. Then I included this js which creates a button for each panel (the panels are already defined in the demo). When you click a button, it triggers goToSection with the panel index: const buttons = document.querySelector(".buttons") panels.forEach((panel, i) => { const button = document.createElement('button'); button.innerText = `Panel ${i+1}`; buttons.appendChild(button); button.addEventListener("click", () => goToSection(i)) }) https://codepen.io/EightArmsHQ/pen/yLEeLaG/b5b64bcc1d7494f8af91d3cbe9c6d5d6?editors=0110

I'm trying to make the stagger argument repeat indefinitely (on an individual item level) but also re-evaluate the positions for each element to move to with each stagger. I seem to be able to get one or the other. You can see the randomness I want here: https://codepen.io/EightArmsHQ/pen/oNyjRxV?editors=0010 And the timing I want to use here:

Sorry I didn't realise that private pens can't be forked. Thanks so much! this is perfect. I think I was confused as you write things like: gsap.to(img, {scale: 0.5}) So I assumed you pass the gsap values, not transform. Just using transform works great! Have a nice day.

Hi there, I'm trying to Flip a skewed, scaled img tag from one position to another. The position is working well, but the transforms aren't smoothly being set. Instead, the scale snaps to the correct one at the end of the animation. I think I'm missing something. In the codepen I show a few of the things I have tried. It seems like I want to add some other gsap properties to the Flip animation, but I'm not sure how to go about it. Any help very welcome! Thanks Dave (Scroll down for the View button in the codepen that triggers the animation)