katerina Solstad
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by katerina Solstad
-
-
This says "reply to this topic". To my thinking that would mean to reply to the topic I posted. Since when I reply I am thinking of replying to the response someone wrote to my topic the option "reply to the topic" feels not exactly correct. That is why I would choose to push button "quote" at least to make sure that I am replying to another person who wrote that quote. The only thing I did not realize that I can shorten that quote by deleting some of it's content. I believe that system works as it should, it is me seeing the meaning of words that I read did not match the intended meaning.
-
3
-
-
7 minutes ago, Carl said:
A simple request: In the future try not to quote the entire message that you are replying to. I
okay. Thank you. Now I understand - I can delete things inside the quote. Got it. Sorry about it.
-
Thank you, I wonder how to reply without copying the original response. I will try this way. The only reason why I did not use this way before was thinking that I will be replying to my own question instead of replaying to the one who answered my question.
-
36 minutes ago, Carl said:
Thanks for the demo. In cases like this where a single tween on a single element isn't working I like to get rid of everything that isn't related to the problem, so I removed everything but the #wTop element. When dealing with an SVG its pretty much impossible to know what #wTop looks like if theres a dozen other things in there.
With everything else removed I saw that the svg was completely blank.
I then noticed that you had visibility:hidden set in the css
#wTop{ visibility: hidden; }
I suspect that perhaps you wanted the path to be hidden before the javascript runs, so I added this to your js to make the path visible
TweenLite.set("#wTop", {visibility:"visible"});
Once the path was visible it made sense that there would not be any animation with the js you had
TweenLite.to("#wTop",1,{drawSVG:"100%"})
A stroke naturally shows at 100% so tweening it to 100% isn't going to show anything changing.
If you want the stroke to reveal itself try you need to set the start value at 0. a fromTo() tween works well for this
TweenLite.fromTo("#wTop",5,{drawSVG:"0%"}, {drawSVG:"100%"})
See the Pen bvZjME?editors=1010 by GreenSock (@GreenSock) on CodePen
Thank you so much! Thank you for explaining it as well as fixing. I feel like I should be paying extra for all this help I receive. Greatly appreciated. I have a question about having other paths and running only one or two of them with DrawSVG plugin. So it is not doable? Let's say I have a big scene done with many paths but would like to animate with drawSVG only a few of them, The other ones I would like to be having different tweens using different plugins. It is not possible? Or I need to be placing them in different groups or divs? Thank you again for your time and effort to help me. I have artistic ideas ( being a visual artist) and learning programming and front web developing with animation to execute those ideas. So I am very new to it. Started in February this year.
-
13 hours ago, PointC said:
Hi again @katerina Solstad
There would be many ways to do that. You could play a tween and then call a function that plays it again with a different duration. You can also create a timeline and tween the timeScale() which is pretty neat. Here's a good post with some of those ideas in demo form.
https://greensock.com/learning-gems
It really depends on exactly what you need to happen. If you can put together a simple CodePen demo with some divs and let us know what you'd like to see, we can guide you to the best solution and give you better answers. If you need bonus plugins for your demo, this is a good GreenSock demo to fork and get you started.
See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen
Happy tweening.
Learning Gems Article has just what I needed! Thank you again.
-
1
-
-
I have no idea why I cannot make plugin to draw one path. Please, help me to figure this out. I did watch the tutorial and some pens but cannot understand what I am doing wrong. All I need there is just for TweenLite to draw one path. Does path have to be open? Thank you.
See the Pen wmOoWE by katyasorok (@katyasorok) on CodePen
-
31 minutes ago, PointC said:
Hi again @katerina Solstad
There would be many ways to do that. You could play a tween and then call a function that plays it again with a different duration. You can also create a timeline and tween the timeScale() which is pretty neat. Here's a good post with some of those ideas in demo form.
https://greensock.com/learning-gems
It really depends on exactly what you need to happen. If you can put together a simple CodePen demo with some divs and let us know what you'd like to see, we can guide you to the best solution and give you better answers. If you need bonus plugins for your demo, this is a good GreenSock demo to fork and get you started.
See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen
Happy tweening.
Thank you again. Yes, I understood your two ways to approach it. Thank you. I will dig into learning more about TimeScale. I have not learned it yet and have not seen the tutorial on it. Thank you again. You are really sooooo helpful. It is amazing.
-
1
-
-
I wonder if there is a way to program as slowing down repetition. Let's say something has repetitive movement and I would like that repetitive movement either to slow down with every new repetition or speed up. Perhaps there is something with tutorial or docs on it.
Thank you.
-
3 minutes ago, PointC said:
Happy to help. Also, just an FYI: if you're loading TweenMax, you do not need to load the ease pack or CSS plugins because they are already loaded with TweenMax. Here is a list of what's included when you include TweenMax:
- TweenLite
- TweenMax
- TimelineLite
- TimelineMax
- CSSPlugin
- AttrPlugin
- RoundPropsPlugin
- DirectionalRotationPlugin
- BezierPlugin
- EasePack
Happy tweening.
Thank you. Yes, I forgot to take them off. They are there because at first I used TweenLite. Thank you. If I have a questions on totally different subject should I start another topic? I am really not too familiar how forums work. This is my first forum I have participated in. And I got so much help! Amazing. Thank you.
-
1
-
20 minutes ago, PointC said:
If the main.js file has your tweens, you need to move it below the GreenSock scripts. Right now it looks like you're loading it first. Load TweenMax, then plugins, then your main.js.
Happy tweening.
Yay!!! That makes sense! It worked. I did not know about it. I thought it would not matter thinking that execution will only start after everything loads. Thank you!
-
3
-
-
1 hour ago, Visual-Q said:
First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it.
and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN.
UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js";
NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.
One more question since you are so kind _ to initialize the pre dependencies like TweenMax locally instead of from CDN - how would one do it? The way I was doing it is to copy the file I downloaded into structure of files for the site I am working on and reference those files in script tags in html file. I did it for some plugins and TweenMax.js and for my main.js where I write the script for animations. .. but it would not run my animations unless I place reference with CDN to TweenMax.
<script src="js/main.js"></script><script src="js/CSSPlugin.js"></script><script src="js/EasePack.js"></script><script src="js/TweenMax.js"></script><script src="js/MorphSVGPlugin.js"></script>My question is if reference to my main.js works and main.js is in the same folder with other files that I placed in it from downloaded ones, than they should work without external reference to TweenMax through CDN? why wouldn't they? Thank you.
-
Thank you!
-
2
-
-
18 minutes ago, PointC said:
Welcome to the forum and thank you for joining Club GreenSock.
If I had to guess, I'd say @Visual-Q is probably right in wondering if you're also loading TweenMax. Here's the CDN link for that:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
Without more to see though, we're just guessing. Since it is working in your demo, you can also export that file via the 'Export' button on the bottom right. Then you can compare the CodePen files to your local version and see what's different.
Happy tweening and welcome aboard.
OH! Thank you! it worked! I did have reference to TweenMax, but I replaced it with the one you gave and it started to work. Probably some stupid spelling mistake that auto complete suggested based on previous misspelling by me. Thank you. All worked.
-
1
-
-
28 minutes ago, Visual-Q said:
First to check the most obvious are your path links correct, is the MorphSVGPlugin.js file in a folder called js in the same directory as the file that is referencing it.
and have you intialized the pre dependencies either TweenLite or TweenMax first either locally or from CDN.
UPDATE: just to clarify: if you simply put the gsap folder you downloaded into your js folder you would have to find the folder it resides in such as "js/greensock-js-shockingly-green/src/minified/plugins/MorphSVGPlugin.min.js";
NOTE!!! this is just an example of where it resides in one of my projects it is not necessarily the correct path for your setup.
Here is my question about that last thing you mentioned. If you are referencing the original files you downloaded that are in some place in you computer and your site "reads" from reference of those files, how would it read and play animation once you transfer it to server? I thought that you need to include those files inside the structure of the site. It seems to me that you are making a reference to downloaded file from directory you placed it on your computer.
I am very new to it. Possibly I am missing the understanding of something very basic.
As for the first part on pre dependencies., yes, I have connected to TweenMax through CDN and it works on other animations without Morph. But it works from CDN. If I use the file I downloaded - it does not work. something I am doing wrong.
-
Please, help the one who is just starting with GSAP. I purchased membership and downloaded src codes and plugins, but I cannot figure out how to reference them in my html for script tag. Things I tried did not work.( this is how I tried to do it)
<script src="js/MorphSVGPlugin.js"></script>Can someone give me a link where it explains? Thank you.
See the Pen rdPgZW?editors=0010 by katyasorok (@katyasorok) on CodePen
Newbie trying to get DrawSVG Plugin working
in GSAP
Posted
Perhaps it is because it is the very first forum I am participating in and therefore I am reading everything literally being afraid to do something wrong).