thomas-12345

I'm have a panoramic SVG with three main focal points. I style it to be wider than the user's monitor, and the idea is as they advance from one position to the next in the UX, the SVG will pan to center each of those three points to give the impression of moving along the X-axis. I'm also zooming in and out when the "frame" changes. I can calculate the center of each focal point and provide GSAP with an x coordinate describing how it should transition left to give the impression of forward motion. I use `scale` for zooming. However, I must to provide a positive `position` property to the `.to()` to ensure the two events don't happen at the same time, or the transform-origin causes problems: It's not linear forward movement; the animation tugs back and forth. I think it would be better looking if both props animated at the same time. I have tried adding an `onUpdate` callback attempting to adjust the transform origin as the animation progresses, but it doesn't work at all. something like: const setTOrigin = gsap.quickSetter(this.selector, 'transformOrigin') onUpdate: () => { // const currentOrigin = gsap.getProperty(this.selector, 'transform-origin') setTOrigin(`${animation.progress() * centers[1]}px`) // centers is an array of the focal point centers coords } Not sure this is even a good idea. Just something I tried. What I have, technically works. But it is pretty janky. And again, doesn't provide the option to use negative positions to make the animation quicker and smoother. I've made a minimal reproduction here hoping someone can offer some guidance: https://codepen.io/thomas-hibbard/pen/RwqbymO Thanks for any insight.

@Rodrigo This is a really great example, thank you so much. It will me a while to unpack what exactly is happening here. One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. There's just a lot going on here and I'm struggling to figure that out.

@Cassie This is the thread

I have started with the card carousel here, and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things: 1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center. 2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa For the first idea, I have tried setting the scale in the initCell method with let scale: number = 0.6; if ([0, 6].includes(index)) { scale = 0.3; } which sort of has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses. The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt. I would be grateful for any help here. Thank you.

@cassie yeah that was poorly worded; i've started a new thread with something a little closer to what I'm trying to do.

@Jack Got it, thank you!

I'm trying to understand the above pen, but am just not getting exactly what is happening. The fist especially confusing bit is in the initCell function var tl = gsap.timeline({ repeat: 1 }) .to(element, { duration:1, x: "+=" + wrapWidth }, 0) .to(element, { duration:cellStep, color: "#009688", scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep) baseTl.add(tl, i * -cellStep); It seems to say, first move each element left the wrapWidth, then increase its scale to 1. Questions: 1. Why would a cell move the entire wrapWidth? Why is it not just moving the width of one cell? 2. What exactly is the 0.5 - cellStep positional argument doing here. Does this somehow orchestrate all the cells moving together? 3. Why does each individual timeline have a position argument in the second to, and also the baseTl.add has another position argument? The other unclear syntax (for me) is this animation initialization: var animation = gsap.timeline({ repeat: -1, paused: true }) .add(baseTl.tweenFromTo(1, 2)) animation.progress(1, true).progress(0, true); It appears to animate the base timeline only between the 1 and 2 second marks, which, I don't even see a declaration of a duration in when the base timeline is created: var baseTl = gsap.timeline({ paused: true }); but I'm not understanding the progress(1).progress(0). Also: removing the second call to progress, the animation appears to work the same. I'm curious what it is doing, but also curious if it's actually necessary. Overall this seems to nest three timelines, the last nesting three timelines attached to each of the eight cards - var animation -> var baseTl -> var tl: timelines (8 of them) I don't really understand this orchestration, can someone explain how these three timelines operate together? Thanks very much

@ZachSaucier I have seen carousel examples that include an empty <div class="proxy"/> element in the html, or use javascript to create a "proxy" element, then use that as the `Draggable.create(proxy, options)` Here's one you worked on ( ). What is the purpose of the proxy? Where can I learn more about techniques like this?

pen is 404

Adding a snap property to this draggable with just a log statement, doesn't log anything. Is that correct?