vsimak

I had 2 production websites in Sveltekit + GSAP, and using setTimeout was my random hacky way of making it work / wait for dom. Just came back to the forums to see if someone found a more elegant solution!

@Vinciola for all Svelte specific questions you should definitely check their amazing docs they have tutorials step by step, they are very easy to get. Here is a pure doc for <script> tags (which you can put on top - or anywhere really - of every .svelte file for any JS stuff to write there): https://svelte.dev/docs#component-format-script

glad to be of help!

Yeah, you gotta tell Svelte to run that only when DOM is rendered. just put it into the onMount function. import { onMount } from 'svelte'; onMount(() => { gsap.to("#box", {x: 300, duration: 1}); }) Also I believe you will need to import gsap like this: import {gsap} from 'gsap/dist/gsap.js'

Hey, Need a person with GSAP experience ScrollTrigger experience ( pinning ) in production is important to have. We'll be going through best practices and reviewing some code together. An hour of your time, maybe two if needed. Send me a PM here. Thank you

Hi there, 48hrs later, 3rd day of trying -- all google result links are blue now && gsap forum threads. I know the code by heart every line now (at least I feel like it). I am missing something ridiculously obvious. ScrollTrigger works without SmoothScroll, and vica versa. Its either ScrollerProxy -- something that I am not doing right. Or its the CSS of the containers..... The worst bit, I've made this work before... 6months ago, using loco, and in production. But now... I really don't know why.... By all accounts it SHOULD work! Heres a quick codesandbox. In scroller.js is the main setup. https://codesandbox.io/s/affectionate-leakey-8697k?file=/pages/index.tsx Thank so you much senpai answer so the codesandbox works straight up -- and I can't recreate the complexity of the source code atm, so I will keep on digging.

@OSUblake Thank you, you're very generous! So overwritting the tl ref with new timelines all the time thus rendering and taking the current values everytime! That's it! The reason why I did left/right is because the actual code is more complex as the hovered circled stays scaled up and enters a new state. In the codepen there is 1 default state from which a hovered circle scales up. In real scenario there are 3 possible states from which a hovering moves all circles and scales/up/down, so more scenarios and mapping of positions. Due to the nature of X,Y I thought it'd be impossible to map it, but since we are overwriting timelines I guess the X,Y will always take in the default beginning position, not the one from the previous timeline? Thank you once more, now I know how to do these interruption animations with more element's, I'll need them for canvas stuff in the future!

tldr. it feels that possibly timelines due to their nature of taking in element values straight away (not at the time of playing), might be the cause of glitch because values are constantly changing especially that its 3 timelines controlling elements. I am trying with overwrite both auto and true, but it's not working correctly. There are two problems in which focusing on the second is more important. The first one is the issue of inputing, in this case hovering, as Blake mentioned. There are methods to solve this, one being what Blake suggested. The result should strive to avoid triggering, hovering on/off , in a consecutive way. Here especially as hovering off reverses() the timeline. The second is really the overwriting issue. What seems a viable solution to me possibly presents a cornerstone mechanics for interactive control of multiple elements. On each hover, a timeline is created with .to(). At that moment timeline renders and picks up the current values in order to create the interpolation. And it starts interpolating. On a new hover, the same thing is repeated, the then-active timeline is paused/killed, and a new one is taking over. This seems plausible. In terms of Promise.All, it seems to me that it is better suited for chaining timelines/animations. Here it is taking over method, for multiple elements at the same time. Is this possibly not well suited for GSAP timelines? I pondered possibly trying to do this with JS/classes/CSS/transition. A bigger overkill would be canvas I presume.

@Cassie & @OSUblake thanks for nudging me towards the good direction - Creating a codepen! @Cassie, thanks for the nudge I've read the article, and it seems relevant to na extent I am just unsure due to the interactive nature of this whether it is the right solution to try and implement! Codepen created and at: https://codesandbox.io/s/3-circles-interaction-gsap-react-90oij?file=/src/trioCircles.js I've added a lot of comments in order to ease-up the reading of it. I am pretty sure that I am misusing gsap logic - it is obvious that timelines are fighting, and that I need to somehow make it all one big self-aware timeline :), maybe via progress, play, labels or so? Not sure.. Sorry once again for not creating a Codepen, I was in a rush today ~~, now it's made.

Hi guys, First I apologise regarding not having a codepen. The codepen: https://codesandbox.io/s/3-circles-interaction-gsap-react-90oij?file=/src/trioCircles.js Question is: 3 interactive circles which scale-up and move on hover, and scale-down and move on hover out. Hovering one circle, also animates the other two with specific scales and movements, both on hover-on and hover-out. I've tried creating 3 paused timelines, (useRefs = react), each for a circle, and play() / reverse() when hover / hover-out. I believe due to the timeline taking in values upon render and not .play(), the from values are not being changed and thus I have a lot of glitching. I am sure there is a way to architecture a scenario where timelines have to keep track of values changed by other timelines on multiple objects that all runs smooth, I am not sure what is the solution. Question is: do I create new timelines on each mouse hover in order to take in the current position values? I apologize for not making a codepen, I understand that it create extra effort - I am in a bit of a jinx due to not being to deliver this "simple" solution I have about 30 tabs open from GSAP forums but somehow I can't seem to understand what is the correct solution and stitch it together.

Chipping in with the same issue. I've gotten the arm64 and thus running node 15 and NPM 7.6.3 But no luck installing gsap @ shockingly member with npm 7.x.x. variations I've tried - specifying @^3.6.0, @latest, and nothing - deleted package-lock - --peer-legacy-deps (even though it has no relevance in reality but I was desperate).. - adding the new line for registry as if its yarn in npmrc, even though its npm. Always getting the same: npm ERR! code E403 npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fshockingly/-/shockingly-3.6.0.tgz - You must be logged in to install/publish packages. npm ERR! 403 In most cases, you or one of your dependencies are requesting npm ERR! 403 a package version that is forbidden by your security policy, or npm ERR! 403 on a server you do not have access to. Now, it WORKS on npm 6.xx which I have installed on my other 2 working stations as I've been developing on this project for last 4 months. It seems its something to do with NPM 7xx ? or 7.6.3. I have to solve this issue today as I need to develop on this laptop remotely - got a deadline. I'll try to test different npm's within limits to node and arm64 arch Update: Found NPM Open issues regarding private registry and 7.3.6 version: https://github.com/npm/cli/issues/2508 And another closed where supposedly they fixed it from 7.3+ but some working versions are mentioned which ill try soon https://github.com/npm/cli/issues/2183