Jump to content

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


Popular Content

Showing content with the highest reputation on 09/10/2019 in all areas

  1. 4 points
    Break it down into pieces: 1. Create a template for how it should look. 2. Copy the HTML for the template however many times you need (an HTML preprocessor line HAML may be helpful but is not necessary). 3. Absolutely position the copies over each other. 4. Create the animation that you need (it looks like they rotated the page 180 degrees and then translated it away. Make sense?
  2. 3 points
    Good start! Add explosions!!! ??? Just kidding. No suggestions at the moment. Keep going!
  3. 3 points
    Generally speaking things like this are done using a FLIP approach. You should read this post to learn more about it. We provide a helper function for FLIP animations with GSAP in our helper function list. Optimally you'd have full knowledge of the positioning and sizing of the clicked on element before and after the transition. Then you can use position: absolute for the transition animation and go from the initial to the final position. You need to give them a positive duration Right now they both have a duration of 0. If you want to have a duration of 0, you should use .set() instead.
  4. 3 points
    I see. Your build is probably is probably dropping the import. See the section on Tree Shaking here. https://greensock.com/docs/NPMUsage So you would probably need to do this. import MorphSVGPlugin from "gsap/src/uncompressed/plugins/MorphSVGPlugin"; // You need to reference the plugin somewhere in your code const plugins = [MorphSVGPlugin];
  5. 3 points
    @PointC this is a confetti cannon: https://codepen.io/elifitch/pen/apxxVL
  6. 3 points
    And this one. https://codepen.io/MAW/pen/KdmwMb
  7. 2 points
    You don't have to use GWD. The Template Gallery has starter HTML and js files for HTML5 dynamic ads. You will need to create a Google sheet, which you share with Studio, with your data. I recommend following the build guides for HTML5 dynamic. https://support.google.com/richmedia/answer/3526354?hl=en
  8. 2 points
    How about this? It's much simpler. https://codepen.io/MAW/pen/wBGvgW
  9. 2 points
    Hello! React + GSAP tutorials are pretty rare (imho), but I just stumbled on this channel. The videos are concise and the creator explains everything well. Hope this is helpful https://www.youtube.com/channel/UCqrxiLP9RHz2GxDJaZuTRBw/videos Blessings, Yeti
  10. 2 points
  11. 1 point
    You are exporting a default here. export default intro But not importing a default here. import {Grid, Animations} from "./components" Check out the docs on import and export. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export I would skip exporting a default. export { intro };
  12. 1 point
    You could put the timeline creation inside a function and call the function later after the grid has been created.
  13. 1 point
    Did somebody say confetti cannon? https://codepen.io/PointC/pen/RyaJmj I'd recommend going with something like what @OSUblake posted above. Simple and easy. Happy tweening.
  14. 1 point
    Saying you ran "npm run build" means nothing to us because that is based on your how your project is setup. Did you try putting the actual plugin in the gsap folder in node_modules?
  15. 1 point
    You would need a business license if you are selling a product that uses GSAP in it to multiple end clients. So for most personal portfolio sites and things like that, GSAP is completely free to use. See our licensing page for more details: https://greensock.com/licensing/ The other time you might need a Club GreenSock membership is if you want to use the club plugins on your project. They are free to use on CodePen but if you need to include them on your portfolio, for example, you would need to get the corresponding Club Membership. There is a helpful overview of what's free and what's included in the club membership in the GSAP Overview found in our docs: https://greensock.com/docs/ A similar listing is found on our club page: https://greensock.com/club/
  16. 1 point
    Hey Donatello, thanks for asking about this - it shows that you're an honorable developer. You’re exactly the type of customer we love to serve! The type of usage you described requires the special commercial license that comes with “Business Green” Club GreenSock memberships which you can purchase for as little as $150/year. That also gets you all of the bonus plugins as well which might open up some really fun possibilities in your animations. Your license covers an unlimited number of your products while it’s active. The only caveat is that it covers your unedited work, meaning that if your clients/customers want to make any changes, they’d need to get their own license. Otherwise, it’d make it easy for a huge company like Microsoft to circumvent the license by hiring a freelancer to start a project and then take it in-house and piggy-back on that single-developer license without getting their own license for their numerous developers. See what I mean? But again, all of the work you do is covered as long as it’s not edited by others outside your organization. Our entire licensing model (which you can read about on our licensing page) is based on the honor system and a simple number-of-developers pricing structure. We don’t require that you “register" each person or project, nor do we inject “phone home” scripts that report usage or suddenly cause things to stop working if your license expires. We extend respect to our users and trust that it'll be reciprocated. Thus far, it has worked well. We’ve been doing this for a decade now with no plans to stop. In terms of how to count developers, it’s based on the number of people who would actually use GreenSock tools, not your clients (unless they are editing GSAP-related code). It’s not intended to be a license that gets passed around from person-to-person, like “Hey Sally, can you stop using GreenSock for 5 minutes so I can update something?” So if a company has 3 developers who use GreenSock from time to time, they should get the “Up to 5 developers” license. You can always upgrade later too. I’m pretty confident you’ll find that the license pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. Does that make sense? If you have additional questions it would be good to provide more information about your use case. If it's private information, you're welcome to use our contact form to provide it to us. Happy tweening.