Tasty Sites
-
Posts
57 -
Joined
-
Last visited
-
Days Won
2
Recent Profile Visitors
6,282 profile views
Tasty Sites's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Recent Badges
81
Reputation
-
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
-
-
- npm-trial
- codesandbox
- (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
-
-
- npm-trial
- codesandbox
- (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 Sites 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 Sites 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
-
Large Illustrator Infographic to SVG to Animation
Tasty Sites replied to Hugh Nivers's topic in GSAP
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