Tasty
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Tasty
-
Thanks Craig! Spent a lot of time trying to make this as smooth as possible and had an almost identical approach for layers and export. Even had some crazy macro for File –-> Export –-> Export As --> then choose ‘Save as type: SVG’ When I discovered presentation attributes things got a lot cleaner... that cls was making me mad Adobe added the assets export panel that makes the process a little better, it exports (or should) a cleaner code for some more complex stuff https://gyazo.com/1fc0451d9022da2e1c377d637e4fcb87 It can be a bit frustrating because the options for the export are hidden, but you just change them once https://gyazo.com/b9b2562d7280039bb66c924b4f23c8e2 Not sure anyone will use this but's also worth to know that you can just select all artwork, ctrl+c and paste it anywhere https://gyazo.com/2f2c653b500d58df5f7caade7e9defc3 (edit: Probably that's the method @OSUblake mentioned ^^') A lot of crap attached to the last one, but it's handy when you just need to check smth simple. Overall, the process is a pain, the assets export sometimes crashes (exports nothing - that can be frustrating if you aren't prepared for it ;D ) - need to restart illustrator after that, not sure if that's only my thing. It still exports junk like some g id="Layer_2" But a huge benefit of it is that you can have multiple SVGs in one document and control, group, change stuff you want to export Happy Exporting
-
Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all
-
Thanks @lennco! I feel a bit stupid - less is more. Thank you for the options, visibility one suits me best. Good to know I can actually set the start of the separator to -1, now it looks quite smooth. Happy Tweening!
-
Hello! Today had some fun animating a lot of stuff, one of them was "typewriter effect" - the thing is it's SVG and it's in perspective, so I thought this can be faked with some Stepped ease and pathDataToBezier, there are 7 letters so I eyeballed a path for separator did some heavy math (lol) and thought it will work. It almost does. That's my final a bit clunky effect And that's the "clean" version But the question is why the stagger for #keyword > path does not start at the same time as the #separator? It looks like there's some "blank timeline space". I encountered this problem few times and I would love to know what I'm doing wrong here - any suggestion will be much appreciated. Thanks !
-
Stroke and goo look amazing, I need to play with it The last 'meatball' - absolutely hypnotizing, played with it for 10 min, then I realized it's 2:45 and I'm playing with blobs in the middle of the night... ;] Thanks again, I have a lot of material to learn from when I wake up
-
Thanks, @OSUblake @Carl That's more than enough - metaballs (first I have read this as meatballs : ) good to know the term I'll go through the post in a moment, overall looks like a good site to follow! Haven't seen that Chris video yet, loving it already. Many many thanks again, I'm on the right track now
-
Hey I'm wondering if anyone had some experience with this kind of thing? My approach was to use MorphSVG - but I'm not sure that's the best way. If you guys have any thoughts how to handle this I'll be very eager to learn - just point me the way, please. Cheers !
-
Thanks Sahil, That helped a lot, tho probably my question touches to many topics at once. I need to prepare more relevant demo for this because it's nth time I have problems with nested timelines - probably I'm doing something wrong over and over again
- 4 replies
-
- 2
-
-
- control timeline
- function held timelines
- (and 1 more)
-
Hello ! Got inspired by the last clean code video about dividing the animations into separate functions and controlling them via a master timeline - usually, I always created a new Tl01 02 03 04 etc then merged them into one master. To stop the timeline in the middle of master timelines I had to use tl02.pause() and it worked like a charm Now as seen in codepen the same thing does not work for the function-based master timeline - I feel like I'm missing something there. If you guys could tell me more about controlling multiple nested timelines - or point me in the right direction it would be fantastic! ========================================================== What I'm trying to achieve - right now I have animation with similar structure as in codepen - masterFunctions tl Few of my timelines are out of the global one (I want them to be in global timeline just can't get them play in the right moment if they are there) I'm trying to put all small timelines into a global one, have control when to play pause each of them and finally, on click reset EVERYTHING to initial positions and play again smoothly - right now I'm using masterFunctions.seek().play(0); for the reset, but I'm not sure that's the best option(?) Any help will be much appreciated ! -
@timdt Glad you like it ! Petr also created a cheat sheet that will for sure help you remember all the fancy stuff - https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf happy tweening !
-
Hello @Leo Nardo try looking for something like 'freelancer platforms' or simply try upwork.com
-
Hello @timdt If you want to learn quite a lot about GreenSock and what it can do, I strongly suggest https://ihatetomatoes.net/g101/ it's a free short course from Petr - he's a great guy, helped me a milion, made me actually like programming itself, same did the folks on this forum! Happy tweening!
-
Hello Craig ! This was EXACTLY the case, thanks so much ! Swear I tried to solve it in similar way, had to mess something up, cus it wasn't working, then I got desperate and created that monstrous timeline combo ^_^' Happy tweening to you !
-
Hello everyone ! I'm having a problem with the perfect looping of the leaves. This should play like : we see factory > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 > the leaves gently show from opacity 0 up to 1 while traveling along the path > before the end of path they should slowly go to opacity 0 and so on and so on. I managed to do some crazy workaround that almost works, but the opacity jumps to 1 after repeat as shown in the pen. This looks like I'm missing something very basic here - if you guys know how to deal with this ANY help will be a huge help wish you a lovely day ! PS <g id="leaves">
-
Eh, god, so I solved this by just scaling down the child elements instead of scaling down the whole group. https://codepen.io/Dikus/pen/JNdPrM Anyway I'm curious, why it scales down the motion path while scaling down the group ? If anyone will bump into this, just scale down the child elements using the svgOrigin of the element you would like to scale down. Nice tool for quick checking the svg Origin - https://gist.github.com/brunnolou/cab8c0a481ea78ff50dc works like a charm ! just paste the code into the console and enter the class/id in the prompt
-
Hello everyone ! I have some very fun and complex thing to do, and any help will be much appreciated ! I'm trying to move SVG group along the path, scale it down, and then move elements of that group along different path. But when I scale down the parent element I also scale the motion path of the child element, and I'm wondering what I'm doing wrong here? Or, maybe my approach is just totally bad. That is what I have https://codepen.io/Dikus/pen/EmaqbV And that is what I would like to achieve - of course the group should scale down, but the path should be the same https://codepen.io/Dikus/pen/EmaqLP?editors=1010 Final SVG - maybe this will help you to imagine what I would love to achieve - the last movement of the purple particle, should move along the purple stroke http://patryksmakosz.com/dev/spectrometer/ So, my question is - is it possible to scale down the main element, and do not scale the path with it? Wish you all the best ! PS pathDataToBezier just rocks! Probably I miss something big here
-
Thanks a milion ! Nice eyeball work ;D Great demo, that's very close to my planed result, thank you for the tip about the SVG, and once again for the overall help. I'm going back to dig up some more info about the svgs, and to their core itself - https://sarasoueidan.com/blog/svg-coordinate-systems/ - thought I know quite a lot about them - I wasn't prepared
- 10 replies
-
- 1
-
-
- pathdatatobezier
- svg
- (and 2 more)
-
Eh I feel so stupid! Thanks, I had that design from sketch and it was a bit messy process, I forgot to ask, how you calculated the exact svgOrigin points? Looks like that's what I did wrong there...
-
Yup, the blog is just awesome ! I need to catch up with all the posts there I have one more issue that changes everything - the orbits aren't perfect circles (damn you reality) This even wouldn't be visible - but the orange circle exposes that clearly http://codepen.io/Dikus/pen/BWNdzo If you can Jack, please expand a bit - what technique/s would you suggest? Of course any help will be much appreciated ! Thanks
-
Thanks! That's exactly what I needed, svgOrigin, love it ! That article looks very nice too, haven't read that yet. I had tried that approach earlier Jack, and I was shocked why it didn't worked, and where the other planet went...it worked just fine, the other planet was stacked on top of the other one... ^_^' http://codepen.io/Dikus/pen/VpwdNx?editors=1010 Again thanks ! I should be able to handle that now !
- 10 replies
-
- 2
-
-
- pathdatatobezier
- svg
- (and 2 more)
-
Hey I have small issue with figuring out how to use the pathDataToBezier plugin, I've read a lot of similar topics, and probably I could do this with just some pure js or even pure css. But I wonder is there some simple way to animate few objects on the same path? I used some very simple example - right now, only the red 'planet' sticks to it's orbit, but it also ends in the different point it should - this should be just perfect closed orbit for all objects on it. I'm probably missing something very basic here Any suggestion on how to bite this would be a huge help ! There will be a lot of objects on that orbits, and I would love to have a lot of control there. http://codepen.io/Dikus/pen/VpwdNx?editors=1010 Thanks!
-
Thanks for the article, now I at least know where to find solutions - tho I hadn't notice any problems so far. Keep up the good work!
-
Thank you very much !
-
Thanks Jonathan and PointC! With your help I was able to make something close to the desired effect, tho I think ScrollMagic isn't the right library for that I tried your suggestion Craig, but I already have so much elements on the site that I had to gave up - my DOM is dynamic and loads after certain scroll position, I would have to plan this better earlier - but nice cheat Anyway, GSAP is the solution ! I just need to make my sections with specific height and capture the scroll event on each element - it's not the perfect way and it's not possible to scroll through the site like I wanted, but it's close ;p Anyway it's a fast way of creating kinda "one scroll section navigation" - and the sections don't have to be 100% so maybe someone will find this useful. Thanks once more! Happy everything P.S By the way, it it possible to use scrollTo with something like this : TweenLite.to(window, 1, { scrollTo: '+=526' }); To scroll let's say 526px from the current position? I tried to use it but it does not work ;p It does not show any error either
- 4 replies
-
- 2
-
-
- scrollto
- scrollmagic
- (and 1 more)
-
Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once I bet it's possible, and that I do something terribly stupid Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must. Any help will be more than welcome !
