Search the Community

So I'm trying to implement a basic horizontal scroll which scrolls across 3 sections upon entering a "container" object. But for some reason the scroll is buggy and the scroll doesn't show any of the sections after the first one. I've attached a link to a sveltekit playground demo. Please look into it. Thank you! https://svelte.dev/playground/c3f9045c97d8440daf51e5c2eb354577?version=5.9.0 I know this question has been asked a ton before but it hasn't been asked for sveltekit specifically and I'm finding it hard to find a solution for it. Sorry!

i've been trying to create this very straight forward gsap flip anim in svelte, but it's giving this error in console. tick() is used to wait for DOM updates in svelte. Here's the demo - https://stackblitz.com/edit/stackblitz-starters-bcg4gd?file=src%2Froutes%2F%2Bpage.svelte

Hi there, I was working on a flip animation across two distinct components where there are a group of elements that are flip-ed across these components. The two components represent two distinct "pages", one is for 'dual-view' and the other is for 'single-view'. The two components have heights larger than the viewport. Hence, we can scroll vertically for each of these components. I noticed that when I don't scroll before triggering the animation, the animation worked perfectly fine, but when I gave it some vertical scroll before triggering the animation, the elements didn't seem to start at the expected positions. Seems like scrolling messed up the starting position of my flip animations. I attach a minimally relevant REPL that I recreated from scratch and also a video explaining the problem. I hope it makes the problem clearer. https://svelte.dev/repl/6fde0174bda140c78b5f9ccf6b9238c5?version=4.2.18 What might be interesting to note is that when I tried to see what I got from calling flip.getState() just before starting the flip animation, the bounds data for all the elements are right. In particular the y data are spot on. So, I am confused how come the animation doesn't seem to start from that recorded position. I tried to give a translate of -window.scrollY for the elements using gsap.set(targets, {y: -window.scrollY}) like so, as suggested here https://gsap.com/community/forums/topic/39827-nuxt3-flip-animation-between-pages-ignore-scroll-position/#:~:text=gsap.set('.el'%2C { y%3A -window.scrollY }) , but it doesn't seem to make the animation start at the right position either. ---------------------------------------------------------------------- Somewhat a distinct problem, but I am wondering if I could get some good starting idea here. As you can see, the paragraphs shift when switching between views. I want to be able to "follow" a specific paragraph when the transition is happening. So, during the flip animation, I want exactly one paragraph to stay fixed in the viewport (more specifically, one has a constant y position from the top of the viewport), and the all the others could move freely, either converging to, or diverging away from that "frozen" paragraph. If such functionality is possible, it would be really great for my use case, and I'd be even more amazed by this elegant library. Thank you!

Hello! I caved the other day and now I'll be doing a LOT of GSAP ? Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component. Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem ?). I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue. The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess. Help would be immensely appreciated!

I have a series of animations triggered by a scrolltrigger (the redStep). The animations are created in onMount and then refreshed using ScrollTrigger.refresh() on change the resize event. They work initially, but don't re-calculate using the new height / width when I make the window smaller or bigger. I have attached a simplified version of my code. The full version calculates the underlying from and two coordinates in a more complex way, but it is the scales that are not re-calculating so that is what I have included here. https://svelte.dev/repl/33ff20f203854e949518253d35147952?version=4.2.8

Trying to use the FLIP plugin in svelte and having an issue. I am changing the width of a div changing it's grid-column value dynamically. the grid value will change from "9 / 14" to "6 / 14" for example, and I am using the FLIP plugin to animate the changing width. It works just fine in one direction, as the line gets larger, but going in the opposite direction the flip process actually messes up the width of the grid-columns of the parent grid. I am expecting that this will NOT happen... In any case, the video explains it much better, and with a visual example...I can try to make a codepen at some point, though not really sure how to port svelte into there...will try to do if needed. Video explaining the issue... Thank you for your help!

Thank you for making this great plugin! ? I'm trying to recreate the Shuffle and FLIP example in Svelte but I have run into a problem where it doesn't work when you reparent elements. gsap-flip.mp4 ? Svelte REPL https://svelte.dev/repl/0ebcbfc6eacb457f954cee131cc2075c?version=3.49.0 I understand how declarative JavaScript frameworks like Svelte recreate those elements when you change them but I assumed when it came to the FLIP technique that it only cared about the before and after changes based on some identifier like data-flip-id. I made another example using Flipping.js where it works as expected. flip.mp4 ? Svelte REPL https://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0 Thank you for your help! ?

Hi I'm running this very simple stagger animation, where I switch between 2 values on x by passing it a function, which was a common technique in gsap since ever. I noticed the animation behaves unpredictably and the staggers aren't linear, and seems it running 3 times and logging these their index values all over… I know i can use gsap.utils.wrap for this case, but this will be a common pattern in my GSAP animations and this left me wondering if somehow I'm messing up the way I should connect my GSAP animations to Svelte? Here's a Svelte REPL with the example: https://svelte.dev/repl/2add39882b9748758f2f8de72701cf0e?version=3.46.4