Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Leaderboard

Popular Content

Showing content with the highest reputation on 08/03/2019 in all areas

  1. @Dipscom - (and @OSUblake and @Jack / Greensock ) Thank you so much for sticking with this and figuring out a solution to the problem! That did the trick and have everything working now! I'd stumbled upon a piece of code if (process.browser) { code here } from a different thread where that was used to make sure you weren't trying to manipulate things before the DOM (and assumedly virtual DOM) were ready. Looking at that now, I see process.browser has been deprecated in favor of process.client, so will update accordingly. And I'd come across a note in the repo about require vs import and wondered if that was worth fiddling with. Really did try to troubleshoot this on my own as much as I could, but I just didn't have enough background knowledge to pull everything together - so really can't thank all of you who support Greensock enough for getting me past this hurdle. Next challenge is to integrate either with Drupal or a separate database on the backend while re-familiarizing myself with everything greensock has to offer. Have a great weekend and thanks again!
    3 points
  2. Hey everyone, I'll try my best to keep it as light and yet as detailed as possible, But i feel i need help after 7 months of trial to make a portfolio that describes the creative innovative well-performed master-crafted art of the builder itself! (That's a lot of adjectives i know, But it says it all) Not gonna bore you to death with my motivations so let's get to the point... This portfolio is a rocket, built to surf between the dimensions of this homemade space that i'm creating. As it may already seem impossible to your negative mind, Well i did it! But it's not so smooth (duh). You see there is a LOT of flying in this project and you guessed it, I use scales, rotations, x, y, opacity and such to deliver that flying effect to a few different elements (so far maximum of 26 different animations at once). Considering what GSAP's examples shows 26 animations at once may not seem that much big of a deal, but we're not talking little green dots here, we're talking 2 giant planets with floating particles around it and another giant thing with different parts floating in your monitor, not to even mention, they're all detailed!! These designs i'm talking about are SVGs & before you get the idea that they're not optimized i gotta say i learned my lesson, the designs weighed around 27 MBs before i optimized them all to roughly 3 MBs, so we're good on that part. Now there maybe a lot of different scenarios i did wrong here, But i don't do maybes so i try to express the parts that i feel are the stick through the progress's wheel! I'm numbering them so it's easier for you to point them out for me: 1. SVGs are embedded to the CSS's background property, Optimized and compressed. The desired CSS properties are given to the element and finally the animation is done either to this element DIRECTLY or to the parent that may contain a few of elements like this one (so far maximum of 7) 2 . The HTML tags linked to these CSS ids are mostly divs. 3. I DID NOT use any images whatsoever. Even the blurred parts or shadows were done by SVG filters (if you didn't know SVG can't handle blurry like designs and so your designing app turns them into image and embeds them in your SVG!) 4. The lagging usually happens when objects are scaling bigger (another duh) OR when the browser is animating any elements that has SVG filters are included in it! However my greatest suspicion is scaling... It's also worth mentioning that when not scaling, everything, even the most detailed elements work smooth! 5. I DO NOT use canvas or flash for any of the purposes i expressed so far am only using JS, JQ, GSAP, CSS, HTML. My aim was to hit a project like this only with the knowledge of these programming languages and frameworks that i know i'm good at.. 6. I'm aware of GPU accelerated animations so i didn't use anything other than transform and opacity on my main animations. 7. When flying, ALL other animations are stopped to help the performance of fly-related animations. 8. This project IS NOT 3D by nature, what i mean by that is i scale & position elements in a way that makes totally 2D divs look 3D (not sure if that made any sense) That's all i could come up with. I gotta say i'm grateful to GSAP's team and it's community cause you guys made something this powerful and now i'm using it to make something cool which i'm pretty sure can be a great example among other examples of how good GSAP really is... I really LOVE to learn new things so don't hesitate to share your knowledge with me if you want to. Have a great life & Good luck on your own projects
    2 points
  3. I'll try to revisit this thread when I get back to my home office and explain why @Dipscom got it working using require inside an if statement. For more in depth knowledge, I would recommend trying to build a node web app without any libraries or frameworks. You'll get a good understanding of how server and client side JavaScript differ. Here's one tip. You can't use import inside an if statement. Well, you can, but it should look like the second import in my tweet here, and I don't know if nuxt supports that. https://twitter.com/OSUbowen/status/1082027558730911746?s=19 For database stuff, I love using Firebase because you don't need an actual backend i.e. serverless. https://firebase.google.com/ And dipscom will rightly point out that I'm a Google lackey for recommending Firebase, but I don't care. ?
    2 points
  4. Welcome to the forums, @Xristi! I'm not entirely sure I understand the question - do you have a codepen demo we could look at? Or were you asking us to build something for you? I don't have the time to build something custom for you, but we'd be happy to help with any GSAP-specific questions. Have a great weekend.
    2 points
  5. Nice! I'm glad somebody found my post useful. ? It's worth noting that @GreenSock just added canvas support to the latest version of the MorphSVGPlugin. Woo Woo! Check out the MorphSVGPlugin docs: https://greensock.com/docs/Plugins/MorphSVGPlugin And this demo: https://codepen.io/GreenSock/pen/WYWZab BTW, I'm still out of town, so I haven't had a chance to check out your library, but it's #1 on my todo list. I love seeing how other people use canvas with GSAP.
    1 point
  6. 1 point
  7. Ha. Well, there's an input field specifically for a codepen URL when you create a topic, but you can just paste a URL anywhere in your answer too.
    1 point
  8. Nuxt does not like ES modules. Never has. Hopefullly, one day will. Like, the day Node does.
    1 point
  9. Right, I got it working. Bloody Nuxt and its ES5 underlying system. It really bothers me that you write in ES6+ syntax with Nuxt but their underlying import/export system is all UMD. In the end it was the SSR that was causing the trouble. It's late here and I won't write a full explanation right now. Might do later, might just update the repo I made to incorporate these quirks we've just found. Assuming you ARE using the UMD version of the premium plugins, chuck them into the vendor folder as originally suggested BUT DO NOT import them. You'll need to require those buggers. Because SSR. /* * The two bellow will not work */ // import GSDevTools from '~/assets/vendor/GSDevTools' // import SplitText from '~/assets/vendor/SplitText' /* * This will work. Why? Beats me, something to do with how backend, frontend works. */ if(process.client) { const SplitText = require('~/assets/vendor/SplitText') const GSDevTools = require('~/assets/vendor/GSDevTools') } export default { //... } One needs to really have some legacy knowledge to do the 1+1 = 2 here. https://nuxtjs.org/faq/window-document-undefined/
    1 point
  10. Hey Snoop, It'd be helpful to have a minimal demo of what you're suggesting. Just guessing, I'd guess it's because filter creates a new compositing layer? I'm also guessing that adding a translate3d instead would reproduce the same effect. You can read more about compositing in this Smashing Magazine post (though the ladder half is a bit too long for me).
    1 point
  11. Hey @five.design, <button>: I moved the button in the html to activate it. Here is another suggestion: one of my first steps with GSAP - @OSUblake and the Forum team helped me a lot. https://codepen.io/osublake/pen/ZbPxjN Maybe it will help you - especially the matchMedia effect. Happy tweening ... Mikel
    1 point
  12. Update: I added SVG to Canvas support! Example: https://codepen.io/LuckyDe/pen/pMrgwz You can now use straight svg point data and if you have the morph plugin you can also morph data and its in canvas! I took @OSUblake 's post implemented it into my library but I also added https://github.com/goessner/parseSvgPathData modified that so you dont need to use path2D so it works in IE I also added a cache system so on every frame if the path data is the same as the old one it wont update the for loop to convert it, it will just run the same draw function. So now you can add svgs like this var hat_dark_p = "M58.2,81c0,0-3.1-29.6-3.5-75.4c0,0,73.2-18.9,141.5,12.3l-10.6,71l55.5,16.4c0,0-75.4,58.9-241.2-15.1L58.2,81z"; var hat_dark = new el.svg({points:hat_dark_p,style:{fillStyle:"#1e3449"}}) and animate it like any other element - skew, scale, xy , etc And if you want to use the morph plugin you can just do var hand_l_p= "M0,105.3l27.8-77.9L42,53.7c0,0,13.8-23.2,50.2-53.7c0,0,38.9,76.2-37.5,129.5c0,0-5.9,3.8-12.1,7.2C34.2,141.3-0.6,134,0,105.3z" var hand_l_b_p= "M0,80.8l53.5-66.9l-1,24.8c0,0,25.8-23.8,64.4-38.6c0,0,14.2,51.7-62.3,104.9c0,0-5.9,3.8-12.1,7.2C34.2,116.7-0.6,109.5,0,80.8z" var hand_l_shapes = [hand_l_p, hand_l_b_p]; MorphSVGPlugin.pathFilter(hand_l_shapes); var hand_l = new el.svg({points:hand_l_shapes[0],style:{fillStyle:"#58cfcb"}}) TweenMax.to(hand_l,1,{points:hand_l_shapes[1],onUpdate:el.update})
    1 point
  13. You can just call reverse() on any animation, but in order to do that you've got to have a reference to that animation. So you could create a variable (outside your functions) to store the animation reference. But the bigger problems it that the way you built this means that the back buttons will never trigger anything because you have click event handlers on the parent elements, thus those will hijack the clicks. Feel free to add a console.log() inside your back button handlers and you'll see they never fire. You could just handle the logic based on click on the whole section like this: https://codepen.io/GreenSock/pen/00d0d94f15f9f3c8e2eb5b8449babaad?editors=0010 But I the danger in that approach is that if someone clicks very quickly, you'll be creating timelines based on inbetween positions, thus when those get reversed, they'll appear to only go part-way back (that's not a problem with GSAP - it's a logic issue in the code). So you could pre-compile each of the two timelines and then just flip the direction on each click which ensures that the starting/ending states are locked in properly: https://codepen.io/GreenSock/pen/31339d8f0e252e0e87f6ecf4f98f6960?editors=0010 You could also build the timelines on the fly so that the easing isn't inverted on reverse. Lots of options. Anyway, I hope that helps.
    1 point
  14. Welcome to the forum. You can check out the Bezier plugin: https://greensock.com/docs/Plugins/BezierPlugin The MorphSVG plugin has a .pathDataToBezier() method. https://greensock.com/docs/Plugins/MorphSVGPlugin You may also be able to make it work with a textPath animation. I wrote about that here: Demo from that thread: https://codepen.io/PointC/pen/vRzmeO Hopefully that points you in the right direction. Happy tweening.
    1 point
  15. Hey lzy100p and welcome. As mikel said, this is unrelated to GSAP. But as caniuse says, you should be able to get it working by using the url(#foo) syntax for an inline SVG instead of trying to use the CSS clip path that you show in the code sample above.
    1 point
  16. Hey @lzy100p, Clip-path is not a feature that all browsers support (that has nothing to do with GSAP): https://caniuse.com/#feat=css-clip-path Kind regards Mikel
    1 point
×