Moritz L

Yes, @Rodrigo, that Pen helped! Thanks. The trick was to actually kill the Tween and recreate it with an updated duration in the onDragEnd hoog of the Draggable Plugin. Cheers!

Hi! I am working on scrubbable video controls. I recreated the most simple version of the controls (without video and animated time) in a CodePen. I've also read this entry in the forums. But even though the problem is the same, the solution didn't seem to apply to my problem – or I am just not seeing it. The problem: My player works just fine when you click on "play", then "pause" and then drag the playhead around. When you then click "play" again, the playhead starts animating from the respective position as intended. BUT: When you hit "play" and drag the playhead without hitting "pause" first, the timeline animation doesn't work anymore. To be precise: The playhead won't animate anymore (until you rerun the code), yet the track fill will resume animating. Play around with the CodePen and you'll see what I mean. My best guess: It has something to do with the inline styles that are applied by GSAP. Because, when I am changing Draggable.type to "left", the animation is resuming also when not hitting "pause" before starting to drag. But then the dimensions seem to off and the playhead doesn't move in sync with the track anymore. And I haven't found a solution for that problem either. I really appreciate any pointing in the right direction. Thanks!

I solved my issue when I completely refactored how I implemented scroll trigger. I moved all the logic to +layout.svelte like so: <script> import '../app.css' import { gsap } from 'gsap' import { ScrollSmoother } from 'gsap/dist/ScrollSmoother' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import BaseNav from '$lib/components/base-nav.svelte' import { onMount } from 'svelte' export let data /** * @type {ScrollSmoother} */ let smoother if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger, ScrollSmoother) } onMount(() => { smoother = ScrollSmoother.create({ smooth: 1, effects: false }) }) /** * @param {HTMLElement} node * @param {Object} options * @param {number} [options.duration] * @param {number} [options.delay] */ // out transition function wipe(node, { duration = 250, delay = 0 }) { // pulling "from" page out of document flow and positioning it absolutely over "to" page gsap.set(node, { position: 'fixed', inset: 0, width: '100%', height: window.innerHeight, zIndex: 9999, overflow: 'hidden', backgroundColor: '#fff', opacity: 1, visibility: 'visible' }) // prevent scrollY from jumping to top of page gsap.set(node.firstChild, { y: -window.scrollY }) // make sure "to" page is scrolled to top smoother.scrollTop(0) const tl = gsap.timeline({ delay, defaults: { duration: duration / 1000 } }) tl.to(node, { height: 0, ease: 'power4.inOut' }) return { duration, delay, /** * The function to call on each animation frame. * @param {number} t - The current tick value. */ tick: (t) => { tl.progress(1 - t) } } } </script> <BaseNav /> <div id="smooth-wrapper"> <div id="smooth-content"> {#key data.url.pathname} <main out:wipe={{ duration: 2000 }} on:outroend={() => ScrollTrigger.refresh()}> <slot /> </main> {/key} </div> </div> I hope that helps anyone who tries to work with Svelte transitions and ScrollSmoother.

Hi there! This is a StackBlitz of a minimal demo showing two routes that I want to transition between: https://stackblitz.com/edit/sveltejs-kit-template-default-2zmrub?file=src%2Froutes%2F%2Blayout.svelte The transition should be a simple wipe from bottom to top – meaning the old page is wiping away and revealing the new page underneath. Sounds simple, but I'm struggling with implementation. Without the transition, everything works just fine. But when I work on the transition, I have the following problems: 1. During transition, Svelte puts the HTML of the new page next to the HTML of the old page. Since I am transitioning the <main> element, we have two <main> elements in the DOM for a short period of time. I want to keep the "old page" on top of everything. So I am using gsap.set to absolutely position the "old page" on top of everything and then animating the height property to reveal the "new page" underneath. Afterwards, Sveltekit unmounts the "old page". The positioning already works as you can see in the demo (after clicking the nav link, the "old page" stays there for 2 seconds before the new page becomes visible). But the wipe doesn't. If I am animating autoAlpha instead, it does work. 2. When I scroll down the page a bit and then clicking the link, the content is jumping up to the top of the page and then animating to the new page. Is this a Sveltekit behavior? Or GSAP? I tried window.scrollTo to the value of window.scrollY just before animating but that did not work (it did work without ScrollSmoother, though). 3. The SmoothScroll doesn't work after route change. Weirdly, this works on my local project which is setup the same way. 4. There is a gap at the end of the page and I don't know where it comes from. I should add that I got the transition working without SmoothScroller. And I got SmoothScroller working without the transition. Just together, everything falls apart. So my best guess is, it has something to do with absolutely positioning the elements, since SmoothScroller uses a fixed element as a wrapper. Pushing me in the right direction would already help me tremendously. I can then figure out the details. Thanks so much!

@Rodrigo Thanks so much for your help! Your solution on CodePen did not work and I tried the wrap helper function before. But your explanation has led me to the solution: After setting up the loop timeline, I am instantly jumping to the end of the timeline like so: const loop = horizontalLoop(images, { repeat: -1, paddingRight: '24px', centerAlign: true, paused: true }) loop.progress(1) This solves my problem, because then I can also have negative progress values. I still can't quite wrap my head around it because at a certain point when constantly scrolling to the right (in a negative timeline direction) the progress will go past 0 and become negative at a certain point, right? But nevertheless, it works. Here is the updated Pen: https://codepen.io/moritzlaube/pen/mdzLOKL Thanks again for your help! It's awesome to be part of this community.

I've done my best to strip out everything that's unnecessary: https://codepen.io/moritzlaube/pen/mdzLOKL Dragging to left, then to right works (same for scrolling). But if you hit rerun and then try to scroll to right first, it's not working.

Hi there! I am fairly new to GSAP, but already dug deep into the forums. That's where I found the helper function for horizontally looping a slider. Works like a charm. Here I am using the helper function: let sliderItems = document.querySelectorAll('.js-slider-item') const images = gsap.utils.toArray(sliderItems) const loop = horizontalLoop(images, { repeat: -1, paddingRight: '24px', paused: true }) Then, within the Observer, I am animating the progress of the horizontalLoop timeline like so: const mapRange = gsap.utils.mapRange(0, window.innerWidth, 0, 1) Observer.create({ target: '.js-wrapper', type: 'pointer,touch,wheel', wheelSpeed: -0.2, onChange: (self) => { const delta = Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY const scrub = gsap.to(loop, { progress: loop.progress() + mapRange(delta) * 5, duration: 1, ease: 'power4.out' }) scrub.invalidate().restart() } }) But here is my problem that I can't wrap my head around: When I first scroll to the left (positive direction on the timeline) and then backwards, the loop works as expected. But when my first drag or scroll is to the right (negative direction of the timeline – so the progress value would be negative), there is no movement at all. Until I scroll just a tiny bit to the left and then backwards.... I can't find any solution online, hoping that someone here is smarter than me. Thanks so much!