grizhlie

You can ask me anything, but how/where do i do this? iPhone settings somewhere? Safari settings? I looked but didn't find anything specifically named as you suggested above.

This was worth responding to on its own. Ease of use is key in my view. I currently have a very 'elegant' (to me) stack. I use SvelteKit, Tailwind, GSAP. I then add Storyblok for a headless CMS. I have made a system with Storyblok/SvelteKit that I can use in every project, and guess what - it includes gsap hehe. EVERYTHING JUST FLOWS ❤️.

Nice response! I wholeheartedly agree to be honest. I was just curious about your thoughts/plans on the matter. I looked at the video of Motion One and quickly saw little point. I'd need to relearn another tool and the only benefit was, as you said, a few ms of gains? No clue why that's important. I didn't know about caching to be honest, so good job on explaining that bit. I'll check the article you shared, sounds like I'll learn something. Overall I didn't think Motion One looked better than GSAP. I was actually underwhelmed when someone explained to me that the key FEATURE was the size and modularity. But as you said, to do some things i do in GSAP id need to import a ton of things. Currently I mostly use `{gsap, ScrollTrigger}` and that's mostly it. I mostly do simple animations as I dislike too much motion in any given thing, but GSAP is perfect for that. https://www.seerstudio.co.uk & https://seerstudio.co.uk/service are the main pages of my recent website. GSAP made animating this stuff painless. Thanks for explaining your thoughts, always nice to have a seasoned developer share their thoughts on a topic. I'm mostly a frontend focused person so I lack exposure to this sort of stuff, I appreciate it. And you're welcome, we all need to 'blabber' about things that we've been pondering on for days/weeks/months! Ciao

@GreenSock All good from my perspective! I also blamed Safari and I don't see how you could tame that beast. Just reading "many hundreds of hours" makes me shiver with pain. In some ways I think of safari as a sort of pain like explorer was. Nothing quite so exact of course, but still painful in some cases to work with, this being one of them I guess! Only suggestion is a question: Do you have any future plans to make GSAP more modular than it is currently, hence reducing its size? I'm only asking because I saw a video about motion one, which is essentially praised for the modular approach they took. More curious than anything, it seems like the only selling point of motion one to me so far.

I honestly gave up for now with this issue. Why? Because on my safari it works perfectly. My partner's safari perfectly. My friend's stuttery. ?‍♂️ I stopped using SmoothScroll in recent projects to avoid stuff like this.

@SteveS Excellent, thank you for taking the time to look over it, I appreciate it Yeah, all animations will be relatively minimal for the project I'm building so I appreciate that tidbit of info.

Hi gang, Just curious if anyone can improve/simplify the javascript bit of the codepen URL. Haven't worked with a timeline in a bit so I may have missed some bits or overcomplicated it. The animation works exactly as I wanted it though, so that's great! Cheers!

Thanks @Cassie. After this post I ended up researching SVG's a bit more. It was less about the tool and more about who was using it. Thanks for the tip on relative-paths, don't really know what that means (yet) but I'll look into it now with a few exports. Appreciate the help

Almost over-wrote it but i remembered how useful seeing the 'journey' is from other posts. It's best to keep GSAP forums pristine and useful as they always are!

Alright. Updated the syntax to v3 Flattened the SVG on export in Affinity Designer (2) (I apparently did not know what "flatten" actually means) Adjusted the gradient color as it was far too dark Updated everything to svgOrigin ? I did not have to change the 200px part, so I guess you were correct regarding flattening the SVG? Don't really understand that but that's ok for today. https://codepen.io/grizhlie/pen/gOBQmvQ?editors=1010

@akapowl Thanks a ton, super helpful! I'll follow everything you said. And of course I MADE UP a property, it's a very "me" thing to do ?... Thanks for everything. I'll redo, learn what I can and will post an improved version as a mini case study of sorts. Appreciate it.

I appreciate this information. As someone who loves GSAP and SvelteKit I am sure that I would have run into this sooner or later. I'll carry on scrolling, thanks again

Hiya, hopefully a simple one that I'm messing up. I exported the SVG from Affinity Designer 2, not sure if that means anything. I don't think it exports things as well to SVG as illustrator (it chooses "circle" over a "path" for example). I just want the element with "#moon-1" to rotate around the "planet". I looked around and tried to copy other solutions but I think there's just something fundamental I don't understand. Any clue as to what it is? This code doesn't LOOK wrong but I'm clearly missing something... //Moons gsap.to("#moon-1", { duration: 10, rotation: 360, svgCenter: "200px 200px", repeat: -1, ease: Power0.easeNone }); Thank you. Edit: If anyone has a tool that is great to create SVGs with that is NOT Adobe Illustrator, I'm open to suggestions. I don't think SVGs are Affinity's strength.

I'm learning a lot, ok i'll fork the original and try the above. ^ Sounds WAY simpler haha. I think I spotted my real issue too. Last time I really read documentation for GSAP I was still learning everything else. If I read some of these things now, they would actually make sense so I think I'll slow down and just read more next time ? So Solution 2 is way simpler. No store needed, awesome to just find ScrollSmoother anywhere in the app with ScrollSmoother.get(). Edit: I created a video explanation of the solution. Partially to check my understanding but also to explain this to anyone else who might be new and confused like I was. Basically it was as simple as creating this component and injecting it in any page. Could add more logic to it but didn't feel a need for it. Basic order of things: Component with the logic to register ScrollTrigger & ScrollSmoother, whilst also setting up ScrollSmoother. Of course you can just use this code in +layout.svelte, it does not matter for functionality. I just throw stuff into components. <GsapSetup.svelte /> Inject this component into +layout.svelte Component with the following logic that runs when we are on a new route and the DOM (html elements) are loaded/mounted on a new page (like switching from homepage to the about page) <GsapPageRefresh /> Kill old-route effects (ScrollSmoother stores elements it is creating effects for in an array (list) Inform ScrollSmoother of the new elements (so we killed home-elements and are now adding about-elements to our array (list) We just need to refresh ScrollTrigger now and it will recalculate based on all of this information. Inject this component into any route/page. // GsapSetup.svelte <script> import gsap from "gsap-trial"; import { ScrollTrigger } from "gsap-trial/dist/ScrollTrigger"; import { ScrollSmoother } from "gsap-trial/dist/ScrollSmoother"; import {onMount} from 'svelte' let smoother; onMount(() => { if(typeof window !== "undefined"){ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); } const ctx = gsap.context(() => { smoother = ScrollSmoother.create({ smooth: 2, normalizeScroll: false, ignoreMobileResize: false, effects: true }); }) return () => ctx.revert(); }) </script> Injected the above into +layout.svelte // +layout.svelte <script> import GsapSetup from '$lib/GsapSetup.svelte' // Other stuff... </script> <GsapSetup /> // Other stuff... Created a component with our "Inform Gsap of our new-route elements whilst destroying old ones" logic. // GsapPageRefresh.svelte <script> import {onMount} from 'svelte'; import { ScrollSmoother } from "gsap-trial/dist/ScrollSmoother"; import { ScrollTrigger } from "gsap-trial/dist/ScrollTrigger"; onMount(() => { if(ScrollSmoother.get()){ let smoother = ScrollSmoother.get(); smoother.effects().forEach((effect) => effect.kill()); smoother.effects('[data-lag], [data-speed]'); ScrollTrigger.refresh() } }) </script> Then I just used the GsapPageRefresh component in every route, it looks like this: // home route (routes/+page.svelte) and about route (route/about/+page.svelte) has more or less identical code. <script> import PageGsapRefresh from '$lib/PageGsapRefresh.svelte' const images = [ 'https://source.unsplash.com/random/1000x1000/?volcano', 'https://source.unsplash.com/random/1001x1000/?volcano', 'https://source.unsplash.com/random/1002x1000/?volcano', 'https://source.unsplash.com/random/1003x1000/?volcano', 'https://source.unsplash.com/random/1004x1000/?volcano', 'https://source.unsplash.com/random/1005x1000/?volcano', 'https://source.unsplash.com/random/1006x1000/?volcano', 'https://source.unsplash.com/random/1007x1000/?volcano', ] </script> <PageGsapRefresh /> <!-- svelte:head stuff... --> <div class="container"> {#each images as image, i} <div class="img-container"> <img src="{image}" alt="nada!" class="img" data-speed="auto" data-lag="0" /> </div> {/each} </div> <!-- Styling... --> (A cleaner way would be to create onDestroy and onMount logic but this was sufficient for my understanding.) Thanks for the new lesson

Happy to say that your advice worked splendidly. That tiny bit of info about how Gsap needs to be given the new elements was everything. I have updated the Basic Demo and tried making it obvious as to how it's all built. So everything is a function or a component, tried doing it step by step. For my future self or anyone else interested in this: In a nutshell, when changing routes: Kill all existing effects Create new effects by telling Gsap about new elements Refresh ScrollTrigger. More information: In the above solution our ScrollSmoother is available as a store, we can access it anywhere in the application. I find this to be the easiest approach to just call functions from anywhere in the application. But you could use a mixture of setContext, svelte store and dispatching updates when a new route is mounted (onMount). I created functions specific to that stored ScrollSmoother so we can update anything we need, with clarity, for example: smoother.updateEffectsLifecycle() ; this function can be called from any page/route. The above function is further broken down in the code into the 3 steps mentioned above. Instead of using a store like I did you can also use a mixture of setContext + svelte store, within +layout.svelte. This could be considered as more correct and clean way of doing it but for my use case the effect is identical. Thanks again Jack, super helpful info.