Leaderboard
Popular Content
Showing content with the highest reputation on 04/10/2018 in all areas
-
I got sliiiightly carried away and made this, haha. I don't if it will help because I saw @Rodrigo and @PointC had provided great answers so I didn't bother commenting the code, but feel free to ask if anything is intriguing. PointC, thanks! hehe6 points
-
Hi and welcome to the GreenSock forums!! A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need: I made a fork of it and changed a bit to simulate what you need: Hopefully this helps. Happy Tweening!!!5 points
-
I was putting together a quick pen and was basically going to say everything @Acccent said ... so I'll spare the detailed response ( thanks @Acccent! ) I've simplified what you originally provided to help illustrate some key things (and because this can be done more simply). You can add some complexities based on what you need, but the gist of it is allowing your selectors to do the work (i.e. look for child <ul>s and show/hide them) rather than explicitly calling out each one. I whittled down the CSS to quickly identify the position and visibility of <ul>s within the heiarchy. Also, because you're tweening height, it makes it easier to initially grab the <ul> height and store it as an element data-attribute to be used as a return value within a function-based value to Tween to. Accessibility is a big factor here and you'll want to address that ... I added some simple focusin and focusout to show an example of how to handle that.4 points
-
Hi @Valeria Welcome to the forum and thank you for joining Club GreenSock. As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard. @Acccent - congratulations on your Moderator promotion. Well done!4 points
-
While I understand that this isn't technically something that SplitText does, it does mean that in effect, SplitText doesn't support languages that rely on ligatures. Is that right? I get that it would be way too much work for the GSAP team to ensure full compatibility with all the possible variations of combined characters in all languages, but maybe something like an optional parameter that says "never split the following strings" would be useful here. That way you could pass (using this case as an example) ["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] and they would remain together in the final result. (Maybe that's still very wrong for someone who does read Denavagari, apologies if so, I'm just assuming based on the codepen.)3 points
-
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.3 points
-
Check this out - I removed SplitText completely and merely iterated through each character of the text and wrapped it manually in a <span>: So it seems like it's unrelated to SplitText. It must be that certain pairs of characters are merged somehow by the browser to form one character. See what I mean?3 points
-
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 points
-
@Visual-Q - When you start typing an answer it should auto claim it for you. Once you start typing there should be a button that says 'I Give up' which should release it. That being said, I have had it 'stick' a few times and I ended up having to re-claim it and then give up to make the claim go away. That hasn't happened in several months though. BTW - congratulations on your moderator promotion. Well done!3 points
-
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.3 points
-
Hi @romain.gr There are a couple issues. First of all, you need to restructure your HTML, I believe. Right now, I can only see one item at each level that has any sub-items at all so even if your code was correct, there wouldn't be anything to animate for all the other empty items. Also, you shouldn't use a tags like you're doing – they're only for links. Using them differently can lead to all sorts of headaches when it comes to styling and accessibility. And, this is just a suggestion, but I think you should use classes to find and store elements. something like .main-nav > li > ul > li > ul > li can get confusing real quick. But it's up to you. Have a look at the forked pen below for an example of a cleaner structure. Secondly, you don't need to change the display property of the elements. using only autoAlpha should be enough. Lastly, when you do something like $secondLevelItems = $('.main-nav > li > ul > li'), you are storing all the elements that match your criteria – so if you have something like <ul class="main-nav"> <li><span>Starter Pokémon</span> <ul> <li>Bulbasaur</li> </ul> <ul> <li>Charmander</li> </ul> <ul> <li>Squirtle</li> </ul> </li> </ul> ...then $secondLevelItems would contain Bulbasaur, Charmander AND Squirtle. So then when you have a timeline that animates $secondLevelItems, all of the items everywhere get displayed; the only reason you might only see one of them is because it appeared over the others. What you need to do, then, is to create a new timeline for each element that has sub-items. You can make this easier by using loops. Have a look at the pen below. Eventually you'll also run into the issue where the mouseleave event triggers before you can actually move your pointer to the sub-item you're trying to click on. Also, be aware that using only mouseenter and mouseleave doesn't account for devices that don't use a mouse at all, like phones or computers with keyboards only.3 points
-
3 points
-
@Rodrigo and @PointC thank you so much for your help! This is awesome and helps me a lot to put me in track. Thanks for your help. I really appreciate it!! Best, Valeria3 points
-
In addition to the docs, there is a lot of great info on the Learning page: https://greensock.com/learning The blog is loaded with good stuff too: https://greensock.com/blog/ Have fun.2 points
-
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. Happy tweening.2 points
-
Yep - if you have a new question, it's always best to start a new thread. Thanks again for your support by joining Club GreenSock.2 points
-
Same as I observed, this language/font obviously has rules that create ligatures of character combinations, when split up they lose their context to one another and don't render properly.2 points
-
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.2 points
-
2 points
-
Typically all the site files, the ones you create, and anything it depends on reside in single directory which would be uploaded to server with the exception of externally referenced files such as files from cdns or other locations. In the event you are not sure about file paths here is an article on w3c: https://www.w3schools.com/html/html_filepaths.asp2 points
-
Hi @katerina Solstad 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.2 points
-
Hi @jimmylet That icon moves over to the other side because that is the start point of the circle path. SVG circles start at the 3 o'clock position in most browsers. You could create paths with desired start points, but you have more than one icon on a path so that could prove troublesome as well. Since this is a circular orbit I think you could make things easier on yourself by rotating the entire group of icons around the center point of the circles. Something like this maybe: I made a slight change to the circles so they'd all have the same cx/cy coordinates. You may also be interested in this thread as it deals with the same topic. Hopefully that helps. Happy tweening.2 points
-
I've updated my pen above to work without classes, if you're interested. The function that uses the classes is still in there too for reference.2 points
-
Hi guys, thanks for your involvement, I really appreciate it. I'm going to have a look at all that and I'll post the final version here when done. Thank you.2 points
-
2 points
-
Hi, the issue was resolved by removing the jquery plugin, thanks again.2 points
-
@Acccent thank you so much! All great demos. Great help for me, and I hope it helps others as well! Thanks a lot!2 points
-
Hi Valeria, Actually, what you're looking for is way easier than the example you showed. There are multiple ways to do what you want: you could either have, for each column, one big image with all the numbers that you animate so that it slides up or down, OR use basically the same technique but animating the background-position property, or you could do it all in CSS with no image at all in which case the column would be a div that you slide up or down. It's up to you really; the first two methods are probably equivalent (the first one is maybe a bit better performance-wise, the second one is "cleaner"), while the third one is a bit more complex but doesn't require any images. In any case, once you've animated the numbers going up or down in each individual column, you'll have to write additional code to determine which columns to animate and how many times in order to reach a specific value. That will probably be the most difficult thing to figure out. But we can help you with the first step for now.2 points
-
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 point
-
Just did a quick test with the Arabic for "Thank you" (after seeing this tweet) and a similar thing happens:1 point
-
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 point
-
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 point
-
I had a look at it duplicating the original text side by side with split text, not only did it introduce those circle characters but it changed the letterforms of some others. I'm guessing the letterforms of this language may change based on ligature sets built into the font combined with browser rendering problem. Instead of using split text maybe you could animate letterspacing on the raw text item though that wouldn't help with the other effects you're after.1 point
-
Hi @Accent, Thanks for your answer, I'm going to have a look, but your pen seems to behave as I would like ;). The top level items are links to pages that s why I wrapped them inside a <a>. I wasn't using classes at first because that nav is going to be generated by Wordpress, even tho I think I can insert classes in some way, not sure yet what I'm gonna do. I'm planning to make the navigation slightly different on touch devices, so it shouldn't be an issue atm, but thanks for all the advices, I'll have a look at your pen and I'll post the final prototype here (I'm planning to add cool animations, wowowowowo).1 point
-
You could but you might be better off sticking to css structured after the html unless you have to do it another way. Once you have a working css template for this type of thing it becomes very easy to transfer it from one site to another.1 point
-
Ah, for sure! I've been working with static websites recently where I just... write the html, haha. so it makes sense to add classes then. But in a CMS or some other environment where PHP is doing the heavily-lifting, for instance, I totally get why you'd leave it that way1 point
-
I agree it's harder to read at first but when you start to work with CMS templating systems like Wordpress it's not always desirable to insert classes all over the place as these are highly susceptible to breaking on updates creating maintainability issues. It's also very convenient maintaining styling based on the top level masterclass if you have multiple style sets on similar elements like lists.1 point
-
Oh! Thanks @GreenSock Awsome which explained all my needs! This is awsome.1 point
-
Having watched Chris Gannon's video I'd like to suggest a slightly different workflow. After some trial and error I find the easiest is to keep all the graphic editing in Illustrator, do export as an SVG file, that leave it unchanged. Then in the html page I load the svg file using ajax, with a recipe found here: http://plnkr.co/edit/LneUEK?p=preview . I did a CodePen to illustrate the method, with a "this works / this does not work" example, to show the utility of those lines of code: I've got rid of "_1" ids by attributing names to the layers in the Illustrator's layer panel. Or at least, to any object I will need to animate or manipulate later. The advantage is that you don't have to do any of the copy-pasting described by Chris. You can keep the exported SVG file in the text editor for reference. Each time you do another export the text editor asks you whether you want to load the new version, and all you have to do is click OK. The only drawback I see is that it doesn't work in CodePen. If you want to share your code, you have to do the copy-paste the SVG into the html section of Codepen. But you would typically do that once or twice, not all the time as you would when you are trying to get things to work.1 point
-
No, in either case you have total control over where the animation gets placed into the timeline. You simply use the position parameter (in either case). See https://greensock.com/position-parameter for more details. Does that help? Think of to() as a shortcut: //long, with add(): tl.add( TweenLite.to(target, 1, {x:100}), "+=2"); //short (same result): tl.to(target, 1, {x:100}, "+=2");1 point
-
Hi and welcome to the GreenSock forums, This sounds like you could use Pixi.js (for canvas rendering) and its displacement filter to do the majority of the heavy lifting. All Pixi and GSAP questions lead to the @OSUblake's CodePen profile. I think if you can figure out how to move one of the bubbles (3rd demo) with your pointer you'll be pretty close to what you need. I'd spend some time studying these examples below and then if you have a question about GSAP, let us know.1 point
-
Welcome back @mikel and congratulations on your shiny new Moderator Badge! You deserve it.1 point
-
Hi @OSUblake, thanks - your advice and code is perfect: The leech is alive ... @Sahil, @PointC: Thanks for support and comments. @shihn: Your library is awesome. I like the look. And if you could morph the whole thing - woww. By the way: 'It's a shame!' refers to the big f Best regards Mikel1 point
-
Did someone say like a ferris wheel? I had this laying around from 4 years ago. Great stuff, Craig and Blake!1 point
-
If one is not as smart as @PointC or @OSUblake to come up with nice calculations and/or is lazy enough, one just cheats with <g> 's...1 point
-
Hehe. I was thinking of the same work around as you. I didn't even think of doing what @Dipscom did with the group.1 point
-
Oh, I wasn't questioning the solutions. Grouping is probably the best/easiest way to go in most cases. I was just curious if I could push some attributes on it and get any sort of control.1 point
-
The last example in @Dipscom's demo is a good work around. Wrap the nested svg in a <g> and scale that. <svg viewBox="0 0 500 500"> <g class="circle"> <svg viewBox="0 0 500 500"> <circle cx="50%" cy="50%" r="50%" /> </svg> </g> </svg> Works... TweenMax.to('.circle', 1, { scale: 0 });1 point
-
Hi and welcome to the GreenSock forums. Glad to hear that you're enjoying GSAP and it's features. One of the features of the snap function of the ThrowProps plugin is the endValue parameter being passed. This is basically the value the plugin calculates once the throw is completed and where the element would ultimately land (if no bounds are setted of course). It works basically like this: Draggable.create("#yourID", { type:"rotation", throwProps:true, snap:function(endValue) { console.log( endValue ); } }); Also keep in mind that the ThrowProps plugin will loop through the array of snap points you're passing and the element will land in the closest one to the array. From the docs: snap : Function | Object | Array - allows you to define rules for where the element can land after it gets released. For example, maybe you want the rotation to always end at a 90-degree increment or you want the x and y values to be exactly on a grid (whichever cell is closest to the natural landing spot) or maybe you want it to land on a very specific value. You can define the snap in any of the following ways:as an array - if you use an array of values, ThrowPropsPlugin will first plot the natural landing position and then loop through the array and find the closest number (as long as it's not outside any bounds you defined). For example, to have it choose the closest number from 10, 50, 200, and 450, you'd do snap:[10,50,200,450]Here's a great sample created by Jamie some time ago, basically does that but instead of going to the closest landing point of the array advances one at a time: http://codepen.io/jamiejefferson/pen/FnKba Rodrigo.1 point