Svein-Tore
Members-
Posts
17 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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.
- 1 reply
-
- 1
-
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?
-
Hi Sahil! Thanks for your answer. I have tested your codepen. If I in the console write: document.getElementById('one')._gsTransform.x I got 100 If I write document.getElementById('one')._gsTransform.left I got undefined, but this div must definitely have a left position?
-
Hi I hope this problem can be easy to explain. The problem is not GSAP but how it works. I have a bullet, and when I hit spacebar the following tween is run (yes, this is a kind of spaceinvaders game): TweenMax.to("#bullet",1,{top:-20}) The bullet is at top=500px, so this bullet will of course leave the screen, no problem,works fine. BUT. When I go to Chrome debugger and write the following in console: document.getElementById("bullet").style.top i get "", That is, an empty string???? Can someone please explain? BTW: when it comes to the animatiom everything works fine, just want to get a grip of what is happening.