Svein-Tore
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Svein-Tore
-
-
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?
-
7 minutes ago, Svein-Tore said:
@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, npm install gsap was the thing I needd👍
-
2
-
-
On 10/20/2020 at 10:01 PM, Dipscom said:
Heya!
Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte.
onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0
Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0
In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0
Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0
Animation directive: (TO-DO soon).
Hope this helps.
@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'
-
2 hours ago, Svein-Tore said:
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
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.
-
-
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.
gsap code in svelte won't work
in GSAP
Posted
Yes, onMount solved the problem. Thanks @vsimak😍