Svein-Tore

Yes, onMount solved the problem. Thanks @vsimak?

Hi! I have created as simple code to move at to left=300, lioek this: ''' <div id="box"></div> <script> import gsap from 'gsap'; gsap.to("#box", {x: 300, duration: 1}); </script> <style> #box { width: 100px; height: 100px; background: black; } </style> ''' When I run this prgram I got the following error: 500 Cannot read properties of undefined (reading 'querySelectorAll') TypeError: Cannot read properties of undefined (reading 'querySelectorAll') at toArray (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:621:106) at new Tween (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:2911:130) at Object.to (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:3297:14) at test.svelte:4:9 at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22) at Object.default (root.svelte:43:39) at eval (/.svelte-kit/runtime/components/layout.svelte:8:41) at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22) at root.svelte:37:37 at $$render (/node_modules/svelte/internal/index.mjs:1770:22) Any suggestions?

OK, npm install gsap was the thing I needd?

@Dipscom These are nice examples. But how to import gsap? Your code says import gsap from 'gsap'; But what does that exactly mean? I get the error Cannot find module 'gsap' imported from 'C:/Users/Svein Tore Narvestad/Documents/svelte/my-app/src/routes/test.svelte'

OK, so I have tested: Solution 1: var tl= new TimelineMax({repeat:-1}); tl.set("#galleri", {src:"bildegallery_1.jpg"}) tl.set("#galleri", {src:"bildegallery_2.jpg"}, "+=2") tl.set("#galleri",src"bildegallery_3.jpg", "+=2" Works partly, image bildegallery_3.jpg won't show up. Solution 2: tl.to("#galleri", {attr:{src:"bildegallery_1.jpg"}}); I think you lost the time, change it to tl.to("#galleri",2, {attr:{src:"bildegallery_1.jpg"}}); Then I get the same problem as I started with. So I conclude I have to change the image names......???

Thanks for your quick and fast respone Carl. I will try it witht both set and attr as you suggersted. On the other hand, I'm a teacher, and I guess some of my students will try this as a solution. So I guess I will change the names for the files to not exclude this solution.

Hi! I have made a very simple kind of slideshow changing the src of an img tag (id=galleri) like this: var tl= new TimelineMax({repeat:-1}); tl.to("#galleri",2,{src:"bildegallery_1.jpg"}) tl.to("#galleri",2,{src:"bildegallery_2.jpg"}) tl.to("#galleri",2,{src:"bildegallery_3.jpg"}) GSAP goes "crazy" with erros like: GET http://localhost:63342/fagdag2018/bildegallery_25502.66384475.jpg 404 (Not Found) bildegallery_24824.033964000024.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24824.033964000024.jpg 404 (Not Found) bildegallery_24154.55656875005.jpg:1 GET http://localhost:63342/fagdag2018/bildegallery_24154.55656875005.jpg 404 (Not Found) This is only three out of a continously feed of errors. But If I change the filenames to: "bildegalleryone.jpg "bildegallerytwo.jpg "bildegallerytrhee.jpg Everythings works fine. Any explanation? Svein-Tore

Thanks for clearing up! In the docs though, you can read: Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. Thats the reason why I expected that TweenMax.defaultEase was OK. BTW TweenLite.defaultEase works of course Perfect!

Hi I tested today, and it is unfortunately not fixed.

HI Just an example on how to use GSDevTools with the physics2DPlugin for calculating Sx and Sy. This makes the physics very illustrative I think.

Thanks guys! I think these things clears up for me. In fact I didn't know the x in GSAP was the same as the translateX(). I haven't found it in the docs, but sure I haven't read all the docs.....

Hi @Jonathan As mentioned above, Use Sahils codepen Open it in codepen, then open the console. Run i once and then type in console document.getElementById("one").style.left The div has x=left=100px. Conosle write "" (empty string). Hope this clearifies.

OK Jack! Go to Sahils pen above. Run it once, then go to console and type document.getElementById("one").style.left I got "" as answer. Shouldn't it be 100px? If I type document.getElementById("one")._gsTransform.x I got 100 document.getElementById("one").style.left

Well, as I mentioned earlyer, if I use TweenMax.to("#bullet", 1, {top: -20}); Everything works Ok, but I'm not able to get the value in debugger (document.getElementById("bullet").style.left is empty). If I write: TweenMax.to(document.getElementById("bullet"), 1, {top: -20}); I am able to the values in the debugger (document.getElementById("bullet").style.left hasa value). Which mean it is "not the same" what I put in as an object in TweenMax? These to are in a way different, am I right?

OK, thanks again! BTW I have played around a bit, think I got it now. If i write TweenMax.to("#bullet", 1, {top: -20}); Everything works Ok, but I'm not able to get the value in debugger. If I write: TweenMax.to(document.getElementById("bullet"), 1, {top: -20}); I am able to teh values in the debugger. Which mean it is "not the same" what I put in as an object in TweenMax? These to are in a way different, am I right?