Tasty
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Tasty
-
Hey @Pata Indeed there's some flickering on IOS Safari, and sometimes the transition does not work properly when going back, and sometimes the split text animations don't fire That's a bit more complicated without seeing the full code, but I can point you to https://ihatetomatoes.net/how-to-make-page-transitions-in-html/ Though probably you would need something more complex as https://ihatetomatoes.net/get-bella/ where @Ihatetomatoes explains a slick way to handle advanced transitions and what should happen before them - great tutorial, I highly recommend buying it Happy Tweening
-
Hey there @chaowen I'm not sure what should be the effect here but maybe you should try with rotationY instead of rotateY I was struggling with that once, I kept writing rotate instead of rotation ^_^' Though I'm not completely sure this solves your issue It changed something when I pushed it to -100 https://codepen.io/tastysites/pen/LYqWzmz Have a great one
-
https://codepen.io/GreenSock/details/PoOpobM Ignore below just found it ^_^'' Any chance to have this starter pen? Title Image Parallax, don't see it on codepen Can't find it anywhere and seems like a very cool template to work on Please add to docs ?
- 21 comments
-
- 1
-
-
- release
- scrolltrigger
- (and 5 more)
-
@Cassie I tried https://codesandbox.io/s/brave-swanson-k3mxsf?file=/index.html But I'm using install gsap .tgz file locally I don't want to put it online Stuff crashed when I imported it into codesandbox and reinstalled as gsap-trial My guess is that I don't know enough about codesandbox Probably need to flush the old node modules and reinstall (which I did, but maybe still needs some love or flush cache, or some vite error >_<)
- 24 comments
-
- 1
-
-
- challenges
- competition
- (and 2 more)
-
yyyyyym, sure xD? https://mind-breaker.netlify.app/ epilepsy warning I'll prepare something less @ _ @ anyway, smoother works like a charm ❤️
- 24 comments
-
- 4
-
-
- challenges
- competition
- (and 2 more)
-
That's what I needed! amazing job ❤️
- 21 comments
-
- 3
-
-
- release
- scrolltrigger
- (and 5 more)
-
Cool stuff Learned few tricks!
-
Thanks a ton Jack! I was switching places of fromElement/toElement and I wasn't in best mind state - it was already getting early Yeah, I've tested most of the MotionPathPlugin stuff, getRelativePosition() was my first try and I almost had it working but there were some offsets from my position that I just couldn't figure out. Though those were the beginnings when I was testing it inside my transformed environment - when I realized I can't even do this with two simple boxes I just had to reach out here for help and get some sleep. This solution is a life saver - thank you again Happy tweening to you too!
-
React-GSAP-ScrollMagic: "animation.gsap not found"
Tasty replied to InquisitiveBadger's topic in GSAP
It's using ScrollMagic under the hood, there were some problems with SM and es6 - so it's kind of a wrapper. Syntax is veeery similar - I really spent a day or two trying to use SM in Vue, and once it was working I couldn't really use .addIndicators. This should make it much simpler, lot's of examples in the docs and it has everything that SM does plus intersectionObservers. Happy Tweening -
React-GSAP-ScrollMagic: "animation.gsap not found"
Tasty replied to InquisitiveBadger's topic in GSAP
Hey, As it goes for SM and GSAP, this was may life saver - https://github.com/jonkwheeler/ScrollScene So far works like a charm at least in Vue, maybe that will help someone -
Hello Everyone I'm struggling with something that I'm not sure if it's trivial, impossible or I'm just doing it wrong. I've checked everything that I could find about .getBoundingClientRect() .getBBox() and I realized that you recently released an suuuuperb update with .convertCoordinates() and a lot of cool stuff. Though I feel a bit silly trying to use it. Or maybe it's way complicated due to 2 different SVGs and their coordinates systems. Please let me know if it's possible to put that blue box over the green one but specifically to #align-line (so the top of the blue box is touching the line) After 6hrs of doing something similar as blue box is doing in the attached CodePen demo and demystifying some awesome @OSUblake demos I would very much appreciate some guidance on this one. Why I have to do this in such way - I have a mask element (a card that comes out of envelope) and it has to be aligned with the envelope - otherwise the animation is a no no - but later I need to position it (card) anywhere on the screen, so the elements must be separated, but in sync - they will also have dynamic sizes and widths depending on the needs and all the stuff wouldn't be much of a problem if not that one sync issue. Hopefully I'm just being silly and it's possible, If not, well I need to rethink the whole thing BTW Thanks for the awesome update! Cheers, Patryk
-
Yup, nice one - I'd also love to read some more books about animations itself. Really enjoyed Rachel Nabors Animation at Work - that's the one I can recommend for sure If you guys have some more, please throw the titles
-
OMG thanks, Craig! Now I know how to figure out masks for all the letters - the trick with opacity...I was doing it blindly ^^' Also, I wasn't sure that's a good way or how to align lines, but I see what you did there Thanks again, it's time to have some fun in Illustrator!
-
Thanks Craig, That looks better - sorry this wasn't precise - my battery was blinking red ^^ I meant the edges in the middle section, tried to trace the letters precisely but there are always some 'leftovers'. I'm not sure I'm going in the right direction. After spending 6 hours in Illustrator with same results I'm convinced that there's something wrong with my approach... If you could push me in the right direction (not sure that's the right way to achieve such effect) that will make my day! Cheers
-
Hey again - had a lot of fun using this method - now I'm trying to use that on a font in logotype that has various widths and strange curves. So far I've tried to trace one path using all the fancy stuff Illustrator has, but results are clunky like in the pen above - even when I'm using 4 paths. Any tip on how to make it better will be a huge help Happy Tweening
-
Hello @Hugh Nivers For more on SVG export One extra tip if you want to export the WHOLE artboard with different layers etc you can export it by https://gyazo.com/e12f38bb3e754b715972acad4f4988a5 Also using Presentation attributes will save you a lot of headaches 1) 2) 3) Happy tweening
- 7 replies
-
- 5
-
-
- infographic
- svg
- (and 3 more)
-
Thanks again Craig, I've seen that pen somewhere here - splendid work. I haven't seen the posts though, exactly THE missing guide for me! Reading atm Happy tweening for you2
-
That was the part I was missing/did wrong...thanks again Craig! Can't wait to use that trick everywhere BTW, about the curve (did it intentionally ^^), that was my main concern - I was able to replicate something "close enough" but that ugly hiccup was just not an option for production. Thanks <3 !
-
Hello everyone, This one is making my head hurt for few days, there's a lot of similar topics but I just still don't get it, or maybe the thing I'm trying to do isn't possible for shapes. (Here the stroke is just large enough to reveal the shape almost instantly, but it still runs half animation in the back animating stroke-dashoffset till the end, that produces some timing issues) I'm still lacking the skill to reveal complex SVG shapes, not sure how to bite it (drawSVG solves this problem for a path) - any suggestions will be a huge help! Trying to do the same thing like @PointC did here - that looks just marvelous. Tried to deconstruct it in Illustrator, made dozens of forks, read about masks/clipping but I still feel like I miss something important. Have a lovely day and happy tweening
-
Good to know Sahil, always thought the xPercent is the faster one ^^'
-
Hello @benoit Looks like this is a performance glitch - I think. Probably because you are using x instead of xPercent witch is better for performance Please take a look at this pen and let us know if it solves the problem Something that also could help if you need more control over the performance https://greensock.com/docs/TweenMax/static.lagSmoothing() I'm not sure how you want to display things in the slider but maybe this small CSS change will help you. If you have any questions, please ask Happy Tweening!
-
Thanks for sharing Shaun! Wanted to post that interview just now, good job Mine usage is pretty typical, so nothing special - just wanted to say huge THANKS, Jack, for starting this! P.S Always had the same problem with math, still, have - I prefer to watch it move
- 10 replies
-
- 2
-
-
- stories
- case studies
- (and 1 more)
-
After a while, I finally know what was frustrating me and why the stuff I wrote in functions wasn't responding, and all the stuff with removing, adding, controlling wasn't working as it should - if you will ever have a problem with controlling timelines held in functions be sure to first declare a variable and then assign it to the function that returns your timeline...^_^'' @Dipscom wrote something like var returned_tl = tlReturned(); a tiny bit of code somewhere in the forums and huge thanks for that - now GSAP magic works the same regardless it's in function or not and my code is much much cleaner Thanks again for the help @Sahil
- 4 replies
-
- 4
-
-
- control timeline
- function held timelines
- (and 1 more)
-
Yeah the path direction is like "yhhhhm did I pushed the reverse path direction - I need to export it out and see" (then do it like 3 more times with multiple paths) I lost all hope for Adobe when they shut down Edge Animate - they just aren't listening. I like illustrator but it's definitely not built for web usage. Had hoped XD will change the game, but they just went from clunky beta to full paid app that isn't worth the price (yet?). Heard Affinity is worth to try - I'll definitely check it out if they send me "the email" Would love to change software for something like Sketch - any windows alternatives besides Affinity? ;P
-
Hello and welcome @Musharraf I would love to help you, though I'm not sure what kind of help you need - that's a pretty complex example for a beginner. Please expand so we can help you better a very simple example of looped animation that can work as a preloader. Here you will find some more info and nice comments. https://ihatetomatoes.net/create-custom-preloading-screen/ Preloaders can be very simple and the opposite, just try something small first. If you need some help with learning GSAP, Petr does a nice job Also, https://greensock.com/get-started-js should help you a million Happy Tweening =========================================================================================================================== BTW my question for anyone that can help me find some peace of mind: That (preloaders) topic is something strange, or maybe it's just me, but usually preloaders just fake loading ( do they? ), I'm curious myself is there any secret ultimate answer how to make a preloader that actually displays the whole progress of page loading - like 50% on loader bar is 10 completed requests from 20? Had few attempts to find the answer but deeper I dig the more confused I am. Shouldn't there be some native, obvious solution or we just need to download everything first and then we can fake the loader ;P? Any guidelines will be much appreciated! Cheers